时间戳

首页 > 解决方案 > 循环遍历 json 文件中的嵌套数组对象时遇到问题

javascript - 循环遍历 json 文件中的嵌套数组对象时遇到问题

问题描述

我有一个类似于此的 json 文件：

[
 {
  "January": [
      {
           "Date": "Jan 1st",
           "Event": "New Years"
      },
      {
           "Date": "Jan 17th",
           "Event": "Chinese New Year"
      }
    ],
  "February": [
      {
           "Date": "Feb 14th",
           "Event": "Valentine's Day"
      },
      {
           "Date": "Feb 29th",
           "Event": "Leap Year"
      }
    ]
 }
]

json 文件的结构是这样的，但有更多的事件和月份。

我尝试过使用嵌套循环，但 JSX 中没有返回任何内容。如果我控制台记录它，我能够得到结果，所以我不确定我是否使用了错误的函数，以及我是否应该使用两个映射循环而不是forEach一个map内部循环。这是我到目前为止所尝试的：

{EventsList.forEach((monthObj) => {
    const monthObjKeys = Object.keys(monthObj);
    monthObjKeys.map((monthKey) => {
        const monthArr = monthObj[monthKey];
        return (
            <div className='Events__ItemList'>
                <h1 className='Events__Month'>{monthObjKeys}</h1>
                <div className='Events__Item'>
                    <p className='Events__Date'>{monthArr.Date}</p>
                    <p className='Events__Name'>{monthArr.Name}</p>
                </div>
            </div>
        );
    });
})}

任何帮助/建议将不胜感激

标签： javascriptreactjsjsx

解决方案

主要问题是.forEach()不返回任何内容，因此您可以使用.map()或.flatMap().

我会建议一种更简单的方法来解决您的问题，如下所示：

const eventList = [{"January": [{"Date": "Jan 1st","Event": "New Years"},{"Date": "Jan 17th","Event": "Chinese New Year"}],"February": [{"Date": "Feb 14th","Event": "Valentine's Day"},{"Date": "Feb 29th","Event": "Leap Year"}]}]

const events = eventList[0];
const months = Object.keys(events);

const result = months.flatMap(key => events[key]);

console.log(result);

因此，result您可以.map()通过以下方式使用您的JSX：

{
   result.map(({Date, Event}, index) =>
     <div className='Events__ItemList' key={index}>
         <div className='Events__Item'>
            <p className='Events__Date'>{Date}</p>
            <p className='Events__Name'>{Event}</p>
         </div>
     </div>
   ) 
}

正如我上面建议的那样，您需要index在每个迭代元素上使用属性。

进一步阅读文档中的列表和键。

推荐阅读