如何对分层嵌套的JSON数据使用.map()方法遍历处理？

你的核心问题是源数据里的条目id是父对象的键名，不是条目自身的属性，而且存储条目的是普通对象不是数组，没法直接调用数组的.map()方法，用Object.entries()即可实现需求。

你拿到的JSON数据实际结构对应如下：

{
  "products": {
    "p1": {
      "description": "Lorem Ipsum",
      "name": "some product",
      "price": 9.99
    },
    "p2": {
      "description": "Dolar sit amet",
      "name": "another product",
      "price": 15.5
    }
  }
}

实现代码 #

Object.entries()会把对象转换成[键名, 键对应值]格式的数组，遍历的时候直接解构就能拿到作为id的键名：

// 注意替换成你实际的数据源路径，如果products在data.results下就写data.results.products
const newData = Object.entries(data.products).map(([id, item]) => {
  return {
    id: id,
    name: item.name,
    description: item.description,
    price: item.price
  }
})

结果说明 #

运行后得到的newData结构如下，完全符合预期：

[
  {
    id: "p1",
    description: "Lorem Ipsum",
    name: "some product",
    price: 9.99
  },
  {
    id: "p2",
    description: "Dolar sit amet",
    name: "another product",
    price: 15.5
  }
]

兼容旧环境写法：如果运行环境不支持ES2017+的Object.entries()，可以换成Object.keys()实现，逻辑完全一致：

const newData = Object.keys(data.products).map(id => {
  const item = data.products[id]
  return {
    id,
    name: item.name,
    description: item.description,
    price: item.price
  }
})

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