@aleshaykovlev
html, css, js, node, webpack, sass, react

Как получить нормальные данные с json?

Обрабатываю ссылку с помощью fetch (работаю на React):
const InfoApi = () => {
    fetch(`https://api.covid19api.com/summary`)
        .then(async(data) => {
            const dataJson = await data.json();
            console.log(dataJson)

            for (let item in dataJson) {
                if (dataJson.hasOwnProperty(item)) {
                    console.log(item);
                }
            }
        })
        .catch(e => {
            console.log(e);
        })

    return (
        <div className="infoApi"></div>
    );
}


Получаю такие данные:
Message, Global, Countries, Date

Хотя Global это объект, Countries это массив, я хочу обработать Countries, но не могу, потому что Countries это string
как и все, что я получил (Message, Global, Countries, Date). Как получить нормальные данные?
  • Вопрос задан
  • 111 просмотров
Пригласить эксперта
Ответы на вопрос 1
@iamsergo
Если вы переписали компонент так, как он у вас в реальности записан, то такой подход неправильный.

Асинхронный код, в принципе весь код с side effects, выносится в специальные места.

Если надо получить данные при загрузке компонента, используются методы жизненного цикла компонента:
Если вы используете классовый компонент, то в метод componentDidMount()
Если функциональный, то в useEffect()
Если нужно получить их при событии(клика и т.д.), то в функцию, потом вызывать эту функцию в обработчике события, или же сразу в обработчике все делать.

Также не совсем понятен ваш код запроса.
fetch возвращает promise с response. У response(объект ответа от сервера) есть специальный метод json(), который возвращает тело ответа от сервера в соответствующем формате.

После получения данных их надо сохранить, чтобы использовать при рендере. Можно сохранить в состояние.

Классовый
В конструкторе : this.state = { countries : [] }
this.setState({ countries : data.Countries })

Функциональный
В начале компонента, перед запросом : const [countries, setCountries] = useState([])
setCountries(data.Countries)

Я бы написал следующим образом для данных, которые нужны при загрузке компонента:

const InfoApi = () => {
  useEffect(() => {
    fetch(`https://api.covid19api.com/summary`)
    .then(res => res.json())
    .then(data => {
        console.log(data)
        // работа с data, в data будет все как надо: Countries - объект
       setCountries(data.Countries)
    })
  }, [])

  return(
     <div className="infoApi">
      {countries.map(country => <div>{country.Country}</div>)}
     </div>
  )
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы