如何格式化从React中从Object.values获得的JSON数据的字符串？

Question

我正在尝试创建一个React手风琴下拉菜单，该菜单应该显示按列表中每个单独ID分组的条目列表。每个ID都包含ThingsThatHaveChangedForThisId的列表，该列表可以具有包含id，property，previousValue和updatedValue的多个条目。JSON数据如下所示

[{
   "id": "id1234",
   "thingsThatHaveChangedForThisId": [{
       "id": "id1234",
       "property": "propertyValue",
       "previousValue": "123",
       "updatedValue": "456"
     },
     {
       "id": "id1234",
       "property": "propertyValue2",
       "previousValue": "000",
       "updatedValue": "001"
     },
   ]
 },
 {
   "id": "id456",
   "thingsThatHaveChangedForThisId": [{
       "id": "id456",
       "property": "name",
       "previousValue": "Anakin Skywalker",
       "updatedValue": "Darth Vader"
     },
     {
       "id": "id456",
       "property": "lightsaberColor",
       "previousValue": "blue",
       "updatedValue": "red"
     }
   ]
 },

我使用了Object.values(data).map，并且能够获得一大串的东西ThatHaveChangedForThisId：在每个ID的下拉列表中显示的id，属性，previousValue和updatedValue。问题在于它只是一个没有按单个条目分组的字符串。我想将ThingsThatHaveChangedForThisId中的每个项目分组，以便在单击下拉列表时将它们以4组而不是大字符串组织。我尝试过映射JSON数据的键并记录结果，如下所示：

const keys = Object.keys(data);
for (let i = 0; i < keys.length; i++) {
  console.log(data[keys[i]]);
}

这为我提供了由键索引的JSON对象中的每个项目。这几乎是我想要的。现在，我需要按索引分组的子数组ThingsThatHaveChangedForThisId的每一项，以便可以使其成为可读格式。类似于：

Entries for id1234:

1. id: id1234
   property: property
   previousValue: previousValue
   updatedValue: updatedValue

2. id: id1234
   property: property2
   previousValue: previousValue2
   updatedValue: updatedValue2

3. id: id1234
   property: property3
   previousValue: previousValue3
   updatedValue: updatedValue3

一旦正确格式化数据，我就可以使其看起来不错。我也尝试过以相同的方式映射数据值，但是会引发错误“每个孩子都应该有一个唯一的键道具”。我以为它们像数组中的每个子项一样是键值对。我认为我走在正确的轨道上，但我被困了一段时间。任何帮助将不胜感激！谢谢。

Answer 1

类似的东西应该对您有用

const data = [{
    "id": "id1234",
    "thingsThatHaveChangedForThisId": [{
        "id": "id1234",
        "property": "propertyValue",
        "previousValue": "123",
        "updatedValue": "456"
      },
      //...
    ]
  },
  //...
];
let formattedData = [];

data.forEach(obj => {
    /*
        obj is:
        {
            "id": "id1234",
            "thingsThatHaveChangedForThisId": [{
                "id": "id1234",
                "property": "propertyValue",
                "previousValue": "123",
                "updatedValue": "456"
            },
            //...
            ]
        }
    */
    obj.thingsThatHaveChangedForThisId.forEach(thing => {
        /*
            thing is:
            {
                "id": "id1234",
                "property": "propertyValue",
                "previousValue": "123",
                "updatedValue": "456"
            }
        */
        formattedData.push({
            id: obj.id,
            property: thing.property,
            previousValue: thing.previousValue,
            updatedValue: thing.updatedValue,
        });
    });
});

//use formattedData