Блог

Как я могу получить доступ к каждому из свойств в данном JSON?

Я также хотел бы отфильтровать конкретные объекты на основе их идентификаторов. Как это сделать с помощью метода array.filter в javascript?

 {
    "records": [
        {
            "id": "abcd",
            "fields": {
                "term": [
                    "xyz"
                ],
                "groupId": 888,
                "url": "https://www.facebook.com",
                "url_c": [
                    "https://www.google.com"
                ],
                "pID": [
                    "1800"
                ],
                "location": [
                    "mumbai"
                ],
                "url_location": [
                    "https://www.mumbai.com/"
                ]
            },
            "createdTime": "2021-05-12T10:18:33.000Z"
        }
    ]
}
 

В настоящее время я пытаюсь это сделать:

 const [info, setInfo] = useState({});

  useEffect(() => {
    fetch(
      "https://apiurl//"
    )
      .then((res) => res.json())
      .then((data) => {
        setInfo(data.records);
        console.log(data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

let resultInfo = info.filter((x) => x.groupId == gid);
console.log(resultInfo[0].fields.groupId);
 

Но это показывает ошибку

Вы инициализируете свой info как пустой объект. Таким образом, ваш код пытается запустить filter объект, который вернет ошибку. Также в вашем фильтре проверка неверна на основе примера json, которым вы поделились

Тебе следует измениться

 const [info, setInfo] = useState({});

let resultInfo = info.filter((x) => x.groupId == gid);
 

Для

 const [info, setInfo] = useState([]);

let resultInfo = info.filter((x) => x.fields.groupId == gid);
 

Поскольку это асинхронно, либо определите вещи в методе .then (), либо вы можете просто использовать asyn await, чтобы все работало на вас.

Что-то вроде

 const [info, setInfo] = useState([]);
  useEffect(() => {
    fetch(
      "https://apiurl//"
    )
      .then((res) => res.json())
      .then((data) => {
    if(data amp;amp; data.records){
        console.log(data);
        const records = data.records.filter((x) => x.fields.groupId == gid);
        setInfo(records);
    // if you will log info here most probably it might log default value so check in your render method for the latest value
     }
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

 

Убедитесь, что gid совпадает с вашим идентификатором группы. Для уверенности вы можете просто передать статический номер просто для проверки.
Теперь попробуйте получить доступ к информации в вашем методе визуализации, например:

 return 
<div>
{JSON.stringify(info)}
</div>