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 июн в 18:59
  • 1
    тут поле rate, а вы хотите получить поле rates его нет, поэтому undef 2 июн в 19:02
  • Не могу понять, как правильно прописать в строке setRates(json.rate)? Если в json сразу идет массив, а в нем сразу объекты без ключа.. то есть, если бы было вот так {"rates": {rate: 22.0234}} тогда было бы понятно, но потерялась как вытащить rate из объекта, который в массиве)))
    – Seona16
    2 июн в 19:05
  • 1
    судя по тому что вы написали, у вас в массиве один объект, чтоб его вытащить используйте нулевой индекс, например json[0] а потом из этого объекта достаньте поле rate , получится что-то вроде json[0].rate 2 июн в 19:10
  • 1
    const price = value / rates[fromCurrency]; const result = price * rates[toCurrency]; уберите здесь квадратные скобки , что было const price = value / rates const result = price * rates 2 июн в 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 июн в 10:09
  • 1
    Если ответ оказался полезным - нажмите стрелочку вверх и если он решает ваш вопрос, то галочку. Я надеюсь вы поняли вашу ошибку, а не просто получили решение. 3 июн в 10:11

Ваш ответ

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

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