[英]React Native: How to get data from JSON with different keys and display it?
[英]How to display a JSON with different keys in React?
我有一个如下所示的输入JSON
:
data: {
“2020-09-19”: [
{
end: “2020-09-19T10:30:00Z”,
start: “2020-09-19T06:52:10Z”,
user: “rakul”
},
{
end: “2020-09-19T18:30:00Z”,
start: “2020-09-19T10:30:00Z”,
user: “jeet”
},
{
end: “2020-09-20T02:30:00Z”,
start: “2020-09-19T18:30:00Z”,
user: “rahul”
}
],
“2020-09-22": [
{
end: “2020-09-20T10:30:00Z”,
start: “2020-09-20T02:30:00Z”,
user: “rakul”
},
{
end: “2020-09-20T18:30:00Z”,
start: “2020-09-20T10:30:00Z”,
user: “jeet”
},
{
end: “2020-09-21T02:30:00Z”,
start: “2020-09-20T18:30:00Z”,
user: “rahul”
}
]
}
我想在 React 中以以下格式显示JSON
:
我在这里面临的挑战是,由于JSON
包含具有不同日期的多个键,我无法在对象上执行map
。 有人可以建议如何以表格/列表格式显示上述JSON
,如图所示?
使用Object.entries()
const data = { "2020-09-19": [ { end: "2020-09-19T10:30:00Z", start: "2020-09-19T06:52:10Z", user: "rakul", }, { end: "2020-09-19T18:30:00Z", start: "2020-09-19T10:30:00Z", user: "jeet", }, { end: "2020-09-20T02:30:00Z", start: "2020-09-19T18:30:00Z", user: "rahul", }, ], "2020-09-22": [ { end: "2020-09-20T10:30:00Z", start: "2020-09-20T02:30:00Z", user: "rakul", }, { end: "2020-09-20T18:30:00Z", start: "2020-09-20T10:30:00Z", user: "jeet", }, { end: "2020-09-21T02:30:00Z", start: "2020-09-20T18:30:00Z", user: "rahul", }, ], } Object.entries(data).forEach(([date, content]) => { console.log(date) content.forEach((c) => { console.log('\\t', c.start, c.end, c.user) }) })
我认为您的问题与从对象到数组的转换更相关,以便能够对其进行迭代。 有多种方法可以做到这一点:
1 - 您可以像@hgb123 推荐的那样使用Object.entries() :
const myObject = { a: 1, b: 2, c: 3}; const myArray = Object.entries(myObject); console.log(myArray);
2 - 您可以使用Object.keys()获取对象的键,正如@Gandzal 推荐的那样,并迭代返回的数组:
const myObject = { a: 1, b: 2, c: 3}; const myKeys = Object.keys(myObject); console.log(myKeys); const myArray = myKeys.map(key => [key, myObject[key]]); console.log(myArray);
3 - 或者您可以在Object.keys()
返回的数组上使用Array.prototype.reduce Object.keys()
:
const myObject = { a: 1, b: 2, c: 3}; const myArray = Object.keys(myObject).reduce((arr, key) => [...arr, [key, myObject[key]]], []); console.log(myArray);
无论您选择哪种方法,对数组进行迭代,并在转换后轻松显示其结果:
const data = { "2020-09-19": [ { end: "2020-09-19T10:30:00Z", start: "2020-09-19T06:52:10Z", user: "rakul", }, { end: "2020-09-19T18:30:00Z", start: "2020-09-19T10:30:00Z", user: "jeet", }, { end: "2020-09-20T02:30:00Z", start: "2020-09-19T18:30:00Z", user: "rahul", }, ], "2020-09-22": [ { end: "2020-09-20T10:30:00Z", start: "2020-09-20T02:30:00Z", user: "rakul", }, { end: "2020-09-20T18:30:00Z", start: "2020-09-20T10:30:00Z", user: "jeet", }, { end: "2020-09-21T02:30:00Z", start: "2020-09-20T18:30:00Z", user: "rahul", }, ], }; const List = props => Object.entries(props.data).map(([date, items]) => ( <div key={date}> <strong>{date}</strong><br/><br/> { items.map((content, index) => ( <span key={index}> start: {content.start}<br/> end: {content.end}<br/> user: {content.user}<br/><br/> </span> )) } </div> )); ReactDOM.render( <List data={data} />, document.getElementById('example') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id="example"></div>
请参阅CodeSandbox,其中包含没有样式的基本示例。
data
是一个带有键值对的对象。 键是您需要在日程表顶部的日期,该键的值是信息(结束/开始/用户)
一种选择是使用Object.keys()函数来迭代您的data
对象并映射 Schedule 组件,从而呈现您的数据。
const ScheduleList = (props) => {
return (
Object.keys(props.data).map(dateKey => {
return <Schedule key={dateKey} dates={props.data[dateKey]} date={dateKey} />
})
);
}
和一个简单的用例
const App = () => {
return <ScheduleList data={data} />
}
Schedule
组件将负责数据的呈现。 粗体日期将作为 props.date 提供,结束/开始/用户数据将作为Schedule
组件中的 props.dates 提供。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.