Javascript 如何格式化从react中的Object.values获取的JSON数据字符串？

我试图创建一个React accordion下拉菜单，该菜单应显示按数组中每个ID分组的条目列表。每个ID都包含一个具有ChangedForthis的内容列表，该列表可以包含多个条目，包括ID、属性、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

，并且能够获得一个大字符串，它在每个id的下拉列表中显示了已更改的内容：id、属性、previousValue和updatedValue。问题是，它只是一个字符串，没有按单个条目分组。我想将每个项目分组为ThinghaveChangedFortissid，这样当单击下拉列表时，它们将以4个为一组，而不是一个大字符串。我已经尝试过映射JSON数据的键并记录结果，如下所示：

const keys=Object.keys（数据）；
for（设i=0；i

这为我提供了JSON对象中由键索引的每个项。这几乎就是我想要的。现在，我需要子数组中的每一项内容，这些内容都经过索引分组，以使其成为可读的格式。比如：

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

---

一旦数据格式化正确，我就能让它看起来很漂亮。我也尝试过以同样的方式映射数据的值，但它抛出了一个错误“每个孩子都应该有一个唯一的密钥属性”。我想他们是这样做的，因为数组中的每个子元素都是一个键值对。我想我走对了，但我已经被困了一段时间。任何帮助都将不胜感激！谢谢。

像这样的东西应该适合你

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

---

像这样的东西应该适合你

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

---

请提供一个更好理解所需结果的示例Hi感谢您的回复，我按照预期结果进行了编辑，我不知道如何消除空白，但理想情况下，列表中的每个条目都会用数字索引，并显示该索引的详细信息。不确定这是否更清楚。正如@rupii提到的，你能发布你预期输出的格式吗？请提供一个你需要的结果示例，以便更好地理解。谢谢你的回复，我用预期结果编辑，我不知道如何消除空白，但理想情况下，它应该是列表中的每个条目都用数字索引，并显示该索引的详细信息。不确定这是否更清楚。正如@rupii所提到的，您可以发布预期输出的格式吗？我可以让它工作，但无论出于何种原因，它没有将条目绑定到ID。因此，当我点击下拉/按钮时，它会呈现每个项目的整个列表。你能想出一种方法让它通过ID渲染吗？我已经尝试过按键设置键和索引，但我无法让它工作，因为当一个条目有多个ID时，某些键会重复。我可以让它工作，但无论出于何种原因，它都不会将条目绑定到ID。因此，当我点击下拉/按钮时，它会呈现每个条目的整个列表。你能想出一种方法让它通过ID渲染吗？我已经尝试过设置键和按键索引，但我无法让它工作，因为当一个条目有多个ID时，有些键是重复的。