ES6：如何解开内部数组并展平JSON数组？

Question

想象一下，我有以下JSON数组：

[
  {
    "team": "Colts",
    "players": [
      {
        "name": "Andrew Luck",
        "position": "quarterback"
      },
      {
        "name": "Quenton Nelson",
        "position": "guard"
      }
    ]
  },
  {
    "team": "Patriots",
    "players": [
      {
        "name": "Tom Brady",
        "position": "quarterback"
      },
      {
        "name": "Shaq Mason",
        "position": "guard"
      }
    ]
  }
]

我想将JSON转换并展平为以下内容：

[
  {
    "name": "Andrew Luck",
    "position": "quarterback",
    "team": "Colts"
  },
  {
    "name": "Quenton Nelson",
    "position": "guard",
    "team": "Colts"
  },
  {
    "name": "Tom Brady",
    "position": "quarterback",
    "team": "Patriots"
  },
  {
    "name": "Shaq Mason",
    "position": "guard",
    "team": "Patriots"
  }
]

我如何使用ES6或lodash语法执行此操作？

Answer 1

使用简单的循环（ES2015）：

const players = [];
for (const team of teams) {
  for (const player of team.players) {
    players.push(Object.assign({team: team.team}, player));
  }
}

如果您的环境支持，您可以使用对象传播而不是Object.assign 。

使用Array#flatMap （将正式成为ES2019的一部分，或使用lodash）：

const players = teams.flatMap(
  team => team.players.map(player => {...player, team: team.team})
);

Answer 2

使用Array#reduce方法和Array#map方法。

let res = data.reduce((arr, { team, players }) => arr.concat(players.map( obj => ({...obj, team }))), []);

// or
let res = data.reduce((arr, { team, players }) => [...arr, ...players.map( obj => ({...obj, team }))], []);

// or
let res = data.reduce((arr, { team, players }) => (arr.push(...players.map( obj => ({...obj, team }))),arr), []);

 var data = [{ "team": "Colts", "players": [{ "name": "Andrew Luck", "position": "quarterback" }, { "name": "Quenton Nelson", "position": "guard" } ] }, { "team": "Patriots", "players": [{ "name": "Tom Brady", "position": "quarterback" }, { "name": "Shaq Mason", "position": "guard" } ] } ] let res = data.reduce((arr, { team, players }) => arr.concat(players.map(obj => ({ ...obj, team }))), []); // or let res1 = data.reduce((arr, { team, players }) => [...arr, ...players.map(obj => ({ ...obj, team }))], []); // or let res2 = data.reduce((arr, { team, players }) => (arr.push(...players.map(obj => ({ ...obj, team }))), arr), []); console.log(res, res1, res2) 

Answer 3

您可以使用lodah的_.flatMap()来迭代数组并展平结果。 在内部使用_.map()迭代玩家并使用对象传播添加team ：

 const arr = [{"team":"Colts","players":[{"name":"Andrew Luck","position":"quarterback"},{"name":"Quenton Nelson","position":"guard"}]},{"team":"Patriots","players":[{"name":"Tom Brady","position":"quarterback"},{"name":"Shaq Mason","position":"guard"}]}] const result = _.flatMap(arr, ({ team, players }) => _.map(players, o => ({ team, ...o })) ) console.log(result) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> 

您可以对Array.flatMap()和Array.map()执行相同的Array.flatMap() ：

 const arr = [{"team":"Colts","players":[{"name":"Andrew Luck","position":"quarterback"},{"name":"Quenton Nelson","position":"guard"}]},{"team":"Patriots","players":[{"name":"Tom Brady","position":"quarterback"},{"name":"Shaq Mason","position":"guard"}]}] const result = arr.flatMap(({ team, players }) => players.map(o => ({ team, ...o })) ) console.log(result) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> 

Answer 4

 const data = [ { "team": "Colts", "players": [ { "name": "Andrew Luck", "position": "quarterback" }, { "name": "Quenton Nelson", "position": "guard" } ] }, { "team": "Patriots", "players": [ { "name": "Tom Brady", "position": "quarterback" }, { "name": "Shaq Mason", "position": "guard" } ] } ] const flatData = data.map(d => { const { team } = d const assignedPlayers = d.players.map(player => ({ team, ...player })) return assignedPlayers }).flat() console.log(flatData) 

Answer 5

使用ES6（扩展运算符）以及reduce和concat ：

 const arr = [{ "team": "Colts", "players": [{ "name": "Andrew Luck", "position": "quarterback" }, { "name": "Quenton Nelson", "position": "guard" } ] }, { "team": "Patriots", "players": [{ "name": "Tom Brady", "position": "quarterback" }, { "name": "Shaq Mason", "position": "guard" } ] } ] console.log(arr.reduce((acc, obj) => { return acc.concat(...obj.players.map(player => { return Object.assign({ team: obj.team }, player) })) }, [])); 

Answer 6

这可以使用以下代码完成！ 核实！

 var inputArray = [{"team":"Colts","players":[{"name":"Andrew Luck","position":"quarterback"},{"name":"Quenton Nelson","position":"guard"}]},{"team":"Patriots","players":[{"name":"Tom Brady","position":"quarterback"},{"name":"Shaq Mason","position":"guard"}]}] var result = []; inputArray.forEach(function(elem) { const players = elem.players; players.forEach(function(child) { const obj = {}; obj["name"] = child.name; obj["position"] = child.position; obj["team"] = elem.team; result.push(obj); }); }); console.log(result); 

 .as-console-wrapper{max-height: 100% !important; top:0px;} 

Answer 7

以下是Array.reduce()和Array.forEach()另一种替代方法：

 let input = [ { "team": "Colts", "players": [ { "name": "Andrew Luck", "position": "quarterback" }, { "name": "Quenton Nelson", "position": "guard" } ] }, { "team": "Patriots", "players": [ { "name": "Tom Brady", "position": "quarterback" }, { "name": "Shaq Mason", "position": "guard" } ] } ]; let output = input.reduce((acc, {team, players}) => { players.forEach(({name, position}) => acc.push({name, position, team})); return acc; }, []); console.log(output); 

 .as-console {background-color:black !important; color:lime;} .as-console-wrapper {max-height:100% !important; top:0;}