如何使用JavaScript访问从.json映射的数据中的对象值？

Question

我正在尝试在我的React项目中使用来自API（ https://messi.hyyravintolat.fi/publicapi/restaurant/11/ ）的数据。 我能够通过API呈现每个“日期”，但是如何使用这种.json（API中紧随“数据”数组内部的那个）呈现每个“日期”的每个“名称”呢？

{item.data [name]}

似乎不是这样做的方法。 这是我用来获取和呈现数据的组件类：

 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

这是因为您需要第二个循环，因为data （嵌套循环）是数组而不是对象。
循环使用数据结构的简单示例：

 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

查看数据源后，JSON的形状如下：

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

因此，单个日期有多个名称。 您可以像下面这样渲染：

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

注意，我在映射数据时也使用索引，以便为每个<li>元素提供一个唯一的React key 。