How do I access object values in data mapped from .json using JavaScript?

Question

I'm trying to use data from an API ( https://messi.hyyravintolat.fi/publicapi/restaurant/11/ ) in my React project. I was able to render each "date" from the API, but how do I render each "name" for each "date" in with this kind of .json (the ones immediately inside the "data" arrays in the API)?

{item.data[name]}

doesn't seem to be the way to do this. Here is the component class I'm using to get and render the data:

 import React from 'react'; /*eslint-env jquery*/ class TestMenu extends React.Component { constructor(props) { super(props); this.state = { food: [] }; } componentDidMount() { this.UserList(); } UserList() { $.getJSON('https://messi.hyyravintolat.fi/publicapi/restaurant/11/') .then(({ data }) => this.setState({ food: data })); } render() { const foods = this.state.food.map((item, i) => ( <div> <h1>{item.date}</h1> <p>{item.data[name]}</p> </div> )); return ( <div id="layout-content" className="layout-content-wrapper"> <div className="panel-list">{foods}</div> </div> ); } } export default TestMenu; 

Answer 1

That's because you need a second loop as data (the nested one) is an array and not an object.
A simple example of looping with your data structure:

 class App extends React.Component { constructor(props) { super(props); this.state = { list: [] }; } componentDidMount() { axios .get("https://messi.hyyravintolat.fi/publicapi/restaurant/11/") .then(({ data }) => { this.setState({ list: data.data }); }); } render() { const { list } = this.state; return ( <div> <ul> { list && list.map((obj) => { return ( <li className="item"> <div className="date"> <span>Date: </span> <span>{obj.date}</span> </div> <div className="names"> { obj.data.map((obj2) => { return ( <div className="name"> <span>Name: </span> <span>{obj2.name}</span> </div> ) }) } </div> </li> ) }) } </ul> </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); 

 .item { list-style: none; border: 1px solid #ccc; padding: 10px; } .date { font-weight: bold; } .names { text-indent: 15px; } .name{ margin: 5px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

After looking at the datasource, the JSON is in the following shape:

[
  {
    "date": some date,
    "data": [
      {
        "name": some name,
        ...
      },
      {
        "name": some other name,
        ...
      }
      ...
    ]
  },
  {
    "date": some other date,
    "data": [ ... ]
  },
  ...
]

So there are several names for a single date. You could render this like the following:

<h1>{item.date}</h1>
<ul>
  {item.data.map((d, idx) => {
    return <li key={idx}>{d.name}</li>
  )}
</ul>

Note that I also use the indices when mapping the data in order to provide a unique key to React for each <li> element.