Как достать данные из JSON React

Question

Как достать данные из JSON React

Рейтинг: 0Ответов: 2Опубликовано: 02.06.2023

Подскажите, пожалуйста, как из jsonn достать данные для конвертера валют? А именно, поле rate(в json)

console.log(json.rates) - undefined в консоле.

function App() {
  const [fromCurrency, setFromCurrency] = React.useState("UAH");
  const [toCurrency, setToCurrency] = React.useState("USD");
  const [fromPrice, setFromPrice] = React.useState(0);
  const [toPrice, setToPrice] = React.useState(0);

  const [rates, setRates] = React.useState({});

  React.useEffect(() => {
    fetch("https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json")
      .then((res) => res.json())
      .then((json) => {
        setRates(json.rates);
        console.log(json.rates);
      })
      .catch((err) => {
        console.warn(err);
        alert("Не удалось получить информацию");
      });
  }, []);

  const onChangeFromPrice = (value) => {
    const price = value / rates[fromCurrency];
    const result = price * rates[toCurrency];
    setFromPrice(value);
    setToPrice(result);
  };

  const onChangeToPrice = (value) => {
    setToPrice(value);
  };

javascript reactjs

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Извиняюсь за форматирование, удобнее было отредактировать в редакторе.
И так, судя из вашего кода, в rates должен храниться объект, у которого ключом будет валюта (USD, UAH, EUR ...), а значение число rate.
Сайт возвращает массив объектов, объекты состоят из:

{
    "cc": "*валюта*",
    "rate": *число*
}

... и прочих, которые нам не нужны.

Для того чтобы мы преобразовали к нужному нам формату, мы можем воспользоваться методом .reduce у нашего массива (json ответа). Он уже нам вернет нужный нам объект, его мы и присваиваем.

function App()
{
    const [ fromCurrency, setFromCurrency ] = React.useState("UAH");
    const [ toCurrency, setToCurrency ] = React.useState("USD");
    const [ fromPrice, setFromPrice ] = React.useState(0);
    const [ toPrice, setToPrice ] = React.useState(0);

    const [ rates, setRates ] = React.useState({});

    React.useEffect(() =>
    {
        fetch("https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json")
            .then((res) => res.json())
            .then((json) =>
            {
                setRates(
                    json.reduce((acc, data) =>
                    {
                        acc[ data.cc ] = data.rate;
                        return acc;
                    }, {})
                );
            })
            .catch((err) =>
            {
                console.warn(err);
                alert("Не удалось получить информацию");
            });
    }, []);

    const onChangeFromPrice = (value) =>
    {
        const price = value / rates[ fromCurrency ];
        const result = price * rates[ toCurrency ];
        setFromPrice(value);
        setToPrice(result);
    };

    const onChangeToPrice = (value) =>
    {
        setToPrice(value);
    };

Answer 2

▲ 2

скорее всего имя поля неправильно указано, проверьте что у вас в res приходит, возможно опечатка

Как достать данные из JSON React

Ответы