如何将对象内的数组拆分为独立对象？JSON数组转换求助

原始数组 #

const arr = [
  {
      "id": 1,
      "category_name": 
      [
         "category_2",
         "category_3"
      ],
   },
   {
      "id": 2,
      "category_name": 
      [
         "category_6",
         "category_3"
      ],
   },
]

目标格式 #

[ 
   { category_name: "category_2", id: "1" },
   { category_name: "category_3", id: "1" },

   { category_name: "category_6", id: "2" },
   { category_name: "category_3", id: "2" },
]

你的尝试及结果 #

你尝试了以下代码，但未得到预期结果：

let array = [];

arr.map((item) => array = [ ...array, {category_name: item.category_name, id : item.id} ] )

得到的结果：

[
  { category_name: [ 'category_2', 'category_3' ], id: 1 },
  { category_name: [ 'category_6', 'category_3' ], id: 2 }
]

正确实现方式 #

问题出在你直接把category_name数组作为值赋值，没有将其展开。以下是几种可行的实现方法：

方法1：使用flatMap + map #

flatMap会先对数组元素做映射，再将结果扁平化一层，正好适配这种嵌套展开场景：

const result = arr.flatMap(item => {
  return item.category_name.map(category => ({
    category_name: category,
    id: String(item.id) // 转为字符串匹配目标格式
  }))
})

方法2：使用reduce + forEach #

如果运行环境不支持flatMap，可以用reduce累加结果数组，配合forEach遍历每个分类：

const result = arr.reduce((acc, item) => {
  item.category_name.forEach(category => {
    acc.push({
      category_name: category,
      id: String(item.id)
    })
  })
  return acc
}, [])

方法3：扩展运算符 + 嵌套map（修正你的原有逻辑） #

let array = [];
arr.forEach(item => {
  const categoryItems = item.category_name.map(category => ({
    category_name: category,
    id: String(item.id)
  }))
  array = [...array, ...categoryItems]
})

核心逻辑都是：遍历原数组的每个元素，再遍历该元素的category_name数组，为每个分类单独创建对象，最后将所有对象合并到结果数组中。

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