Блог

Главная - Вопросы по программированию - измените плоский json на список json в React

измените плоский json на список json в React

#reactjs

Вопрос:

я получил api в https://api.exchangerate.host/latest , если вы видите цены, я хочу перейти от

 rates :{"start": 1,...., "end": 20}

в

 rates:[{"start": 1},..,{"end":20}]

Причина в том, что я не могу сопоставить его с помощью

 rates.map(item=> <li>item.key | item.val</li>);

или с помощью

 render(){
    var {isLoaded, items} = this.state;
    

    if(!isLoaded){
      return <div>Loading...</div>
    }else{
      const results = Object.entries(items.rates).map(el => ({"key":[el[0]], "value": el[1]}))
    
    // console.log(results);
      return(
        <div className="App">
          <header className="App-header">
              <ul>
                {results.map(item => <li key={item["key"]}> {item["key"]} : {item["value"]} </li>)}
              </ul>
          </header>
        </div>
      );
    }
    
  } 
}

Комментарии:

1. JSON.parse() ?

2. Object.keys возвращает только ключи (именно то, что указано в названии) Вам нужно rates[key] получить значение

3. @Andrew ты имеешь в виду вот так? {JSON.parse(rates).map(item => <li>item.key</li>)}

4. @mousetail это так? Object.keys(rates).map(el => results.push({el:rates[el]}));

5. Да, но в этом случае будет сложно получить доступ к ключу в компоненте

Ответ №1:

Как насчет использования Object.entries(), например:

 const data = { start: 1, end: 20 }
const res = Object.entries(data).map(el => ({[el[0]]: el[1]}))
console.log(res) // returns [ { start: 1 }, { end: 20 } ]

При необходимости вы можете преобразовать возвращаемое значение в формат JSON

 console.log(JSON.stringify(res)) // returns [{"start":1},{"end":20}]
Метки: