时间戳

首页 > 解决方案 > 如何格式化从 Object.values 中获取的 JSON 数据字符串？

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

问题描述

我正在尝试创建一个 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并且能够获得大量的 thingsThatHaveChangedForThisId：id、property、previousValue 和 updatedValue 显示在每个 ID 的下拉列表中。问题在于它只是一个不按单个条目分组的字符串。我想将 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

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

标签： javascriptarraysjsonreactjsfrontend

解决方案

像这样的东西应该适合你

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

推荐阅读