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）：

from urllib.request import urlopen
from xml.etree.ElementTree import parse

# Download the RSS feed and parse it
u = urlopen('http://planet.python.org/rss20.xml')
doc = parse(u)

# Extract and output tags of interest
for item in doc.iterfind('channel/item'):
  title = item.findtext('title')
  date = item.findtext('pubDate')
  link = item.findtext('link')

  print(title)
  print(date)
  print(link)

如果环境支持，可以使用对象传播代替const players = []; for (const team of teams) { for (const player of team.players) { players.push(Object.assign({team: team.team}, player)); } } 。

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

Object.assign

Answer 2

与Array#reduce方法一起使用Array#map方法。

typo3/backend.php?edit=57

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), []);

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()做同样的事情：

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;}