[英]How do I translate this map function from Javascript to Typescript given the structure of the data object being mapped?
[英]How do I access object values in data mapped from .json using JavaScript?
我正在嘗試在我的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;
這是因為您需要第二個循環,因為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>
查看數據源后,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
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.