DDolgy
@DDolgy
Распи***й

Как нормально перебрать json?

много текста, но он для примера

вот мой код реакта.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


import text from './product.json';
import cont from './cont.json';

  
class App extends Component {
    
    	render() {



        return (
     
			<div className='shopping-list'>
				<ul className='list-tem'>                                                   
                                             
                                             
					{text.map( function (item, index) {
						return (<li key={index}>{item.id}   {item.title} <img src={item.image} alt=""/>   </li>    );} )
					}
                                
				</ul>
			</div>
		)
        
        
 
	};

}
export default App;


вот пример файла product.json
[{
    "id": 0,
    "image": "https://picsum.photos/200/220",
    "price": 263.79,
    "title": "Occaecat"
}, {
    "id": 1,
    "image": "https://picsum.photos/200/221",
    "price": 424.76,
    "title": "Consectetur"
} ]

все выводится правильно.
тут данные как бы одноранговые.

но при таком json
{
  "continents": [
    {
      "code": "AF",
      "name": "Africa"
    },
    {
      "code": "AN",
      "name": "Antarctica"
    },
    {
      "code": "AS",
      "name": "Asia"
    },
    {
      "code": "EU",
      "name": "Europe"
    },
    {
      "code": "NA",
      "name": "North America"
    },
    {
      "code": "OC",
      "name": "Oceania"
    },
    {
      "code": "SA",
      "name": "South America"
    },
    {
      "code": "??",
      "name": null
    }
  ]
}


этот код не работает. как правильно вывести данные из такого json?
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Вам бы перед тем как браться такие вещи реализовывать, хорошенько основы JavaScript изучить.
В первом случае у вас в json массив, во втором объект содержащий массив.
Перебрать элементы во втором случае можно так:
{cont.continents.map(el => (
  <li key={el.code}>{el.name}</li>
))}


Я вам настоятельно рекомендую пока отложить React и потратить пару дней на изучение основ JavaScript, а так же синтаксиса ES6, JSX и экспериментальных фич языка используемых в React.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
папробуйте так
{Object.keys(text).map( 
 (item, index) =>{
            return (<li key={index}>{text[item].id}   {text[item].title} <img src={text[item].image} alt=""/>   </li>    );} )
          }
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы