React+JavaScript环境下为D3.js扁平化MongoDB导入数组

要将你的数据转换为适配D3.js的扁平结构，直接使用数组的map方法对每个对象进行转换，提取嵌套数组中的目标字段并重组结构即可：

代码实现 #

const originalData = [
  {
    "location": [ { "createdAt": "2023-04-03T18:27:42.088Z" } ],
    "count": 2,
    "item": [ { "name": "football" } ]
  },
  {
    "location": [ { "createdAt": "2023-04-03T18:27:42.088Z" } ],
    "count": 1,
    "item": [ { "name": "Baseball" } ]
  }
];

const flattenedData = originalData.map(entry => ({
  createdAt: entry.location[0].createdAt,
  count: entry.count,
  name: entry.item[0].name.toLowerCase() // 转换为小写以匹配目标结构
}));

console.log(flattenedData);

为什么之前的尝试无效？ #

• flatMap和flat方法用于扁平化嵌套数组，但你的数据是对象包含嵌套数组，并非数组嵌套数组，这类方法无法直接提取对象中的字段。
• 你得到的带索引的键结构，是因为遍历方式错误地将数组索引拼接到键名中，没有正确提取嵌套对象的属性值。

扩展说明 #

如果location或item数组可能包含多个元素，可根据需求调整逻辑（比如用flatMap展开所有元素），但根据你提供的示例数据，每个数组仅含一个元素，直接取索引0即可。

内容的提问来源于stack exchange，提问作者crawlings