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

Question

[Дима Долготер]

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

вот мой код реакта.

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?

Answer 1

[Антон Спирин]

Вам бы перед тем как браться такие вещи реализовывать, хорошенько основы JavaScript изучить.
В первом случае у вас в json массив, во втором объект содержащий массив.
Перебрать элементы во втором случае можно так:

{cont.continents.map(el => (
  <li key={el.code}>{el.name}</li>
))}

Я вам настоятельно рекомендую пока отложить React и потратить пару дней на изучение основ JavaScript, а так же синтаксиса ES6, JSX и экспериментальных фич языка используемых в React.

Answer 2

[Роман Александрович]

папробуйте так

{Object.keys(text).map( 
 (item, index) =>{
            return (<li key={index}>{text[item].id}   {text[item].title} <img src={text[item].image} alt=""/>   </li>    );} )
          }

Comments

[Дима Долготер]

что-то не очень(

[Роман Александрович]

Дима Долготер, так а что пишет?

[Роман Александрович]

Дима Долготер, https://jsfiddle.net/82n77fjh/11/