0

Подскажите, пожалуйста, как из 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);
  };

2 ответа 2

2

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

11
  • В json вот такие данные (поле rate): [ { r030: 36, txt: "Австралійський долар", rate: 24.2102, cc: "AUD", exchangedate: "05.06.2023" }, если прописываю код (в консоле undefined) : React.useEffect(() => { fetch("bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json") .then((res) => res.json()) .then((json) => { setRates(json.rate); console.log(json.rate); })
    – Seona16
    2 июн 2023 в 18:59
  • 1
    тут поле rate, а вы хотите получить поле rates его нет, поэтому undef 2 июн 2023 в 19:02
  • Не могу понять, как правильно прописать в строке setRates(json.rate)? Если в json сразу идет массив, а в нем сразу объекты без ключа.. то есть, если бы было вот так {"rates": {rate: 22.0234}} тогда было бы понятно, но потерялась как вытащить rate из объекта, который в массиве)))
    – Seona16
    2 июн 2023 в 19:05
  • 1
    судя по тому что вы написали, у вас в массиве один объект, чтоб его вытащить используйте нулевой индекс, например json[0] а потом из этого объекта достаньте поле rate , получится что-то вроде json[0].rate 2 июн 2023 в 19:10
  • 1
    const price = value / rates[fromCurrency]; const result = price * rates[toCurrency]; уберите здесь квадратные скобки , что было const price = value / rates const result = price * rates 2 июн 2023 в 19:22
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);
    };
2
  • Спасибо огромное!!!! Все заработало!!!
    – Seona16
    3 июн 2023 в 10:09
  • 1
    Если ответ оказался полезным - нажмите стрелочку вверх и если он решает ваш вопрос, то галочку. Я надеюсь вы поняли вашу ошибку, а не просто получили решение. 3 июн 2023 в 10:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.