javascript - 在 React 中映射嵌套的 JSON 对象

Question

我花了几个小时试图弄清楚这一点，但完全失败了。我需要你的帮助。

我有一个 JSON 文件，我想循环并创建一个 UI，该 UI 具有多个列，该列具有多个组，这些组具有不同数量的项目。

JSON文件

{
"stuff": "content",
"stuff": "content",
"List" : [
  {
    "column" : [
      {
        "group" : [
          { "name" : "item 1" },
          { "name" : "item 2" }
        ],
        "group" : [
          { "name" : "item 3" },
          { "name" : "item 4" },
          { "name" : "item 5" },
          { "name" : "item 6" }
        ],
        "group" : [
          { "name" : "item 7" },
          { "name" : "item 8" },
          { "name" : "item 9" },
          { "name" : "item 10" }
        ],
      }
    ],
    "column" : [
      {
        "group" : [
          { "name" : "item 11" },
          { "name" : "item 12" },
          { "name" : "item 13" },
          { "name" : "item 14" }
        ],
        "group" : [
          { "name" : "item 15" },
          { "name" : "item 16" },
        ],
        "group" : [
          { "name" : "item 17" },
          { "name" : "item 18" },
          { "name" : "item 18" },
        ],
      }
    ]
  }
  ]
}

和反应组件：

import Data from 'data.json'

...
    {Data.List.map((columnItem, index) => (
      <div className="column">
        {columnItem.column.map((groupItem, index) => (
        <div className="group">
          {groupItem.group.map((item, index) => (
            <div>
              {item.name}
            </div>
          ))}
        </div>
        ))}
      </div>
    ))}
...

问题是我只得到一件物品作为回报。
对我来说，我通过使用 .map 以完全错误的方式解决问题有
什么想法吗？我会很感激你的帮助。

标签： javascriptarraysjsonreactjsjsx

Answer 1

数据已损坏。你有重复的关键数据。

{
  "stuff": "content",
    "stuff": "content",
    "List" : [
      {
        "group" : [
          { "name" : "item 1" },
          { "name" : "item 2" }
        ]
      },
      {
        "group" : [
          { "name" : "item 11" },
          { "name" : "item 12" },
          { "name" : "item 13" },
          { "name" : "item 14" }
        ]
      }
    ]
  }
]
}