arrays - Angular flat data to object array

Question

I've looked at several examples, but I just don't get it. I have a flat dataset that I want to convert into a nested structure in typescript.I understand/believe I'll need to use .map and .forEach, but I just am at a loss of how to do it.

I have data like this:

origData = [
        {name: 'Grass', value: 'bulbasaur-0', viewValue: 'Bulbasaur'},
        {name: 'Grass', value: 'oddish-1', viewValue: 'Oddish'},
        {name: 'Grass', value: 'bellsprout-2', viewValue: 'Bellsprout'},
        {name: 'Water', value: 'squirtle-3', viewValue: 'Squirtle'},
        {name: 'Water', value: 'psyduck-4', viewValue: 'Psyduck'},
        {name: 'Water', value: 'horsea-5', viewValue: 'Horsea'},
        {name: 'Fire', value: 'charmander-6', viewValue: 'Charmander'},
        {name: 'Fire', value: 'vulpix-7', viewValue: 'Vulpix'},
        {name: 'Fire', value: 'flareon-8', viewValue: 'Flareon'},
        {name: 'Psychic', value: 'mew-9', viewValue: 'Mew'},
        {name: 'Psychic', value: 'mewtwo-10', viewValue: 'Mewtwo'},
  ];

and I want it to look like:

pokemonGroups: PokemonGroup[] = [
    {
      name: 'Grass',
      pokemon: [
        {value: 'bulbasaur-0', viewValue: 'Bulbasaur'},
        {value: 'oddish-1', viewValue: 'Oddish'},
        {value: 'bellsprout-2', viewValue: 'Bellsprout'}
      ]
    },
    {
      name: 'Water',
      pokemon: [
        {value: 'squirtle-3', viewValue: 'Squirtle'},
        {value: 'psyduck-4', viewValue: 'Psyduck'},
        {value: 'horsea-5', viewValue: 'Horsea'}
      ]
    },
    {
      name: 'Fire',
      disabled: true,
      pokemon: [
        {value: 'charmander-6', viewValue: 'Charmander'},
        {value: 'vulpix-7', viewValue: 'Vulpix'},
        {value: 'flareon-8', viewValue: 'Flareon'}
      ]
    },
    {
      name: 'Psychic',
      pokemon: [
        {value: 'mew-9', viewValue: 'Mew'},
        {value: 'mewtwo-10', viewValue: 'Mewtwo'},
      ]
    }
  ];

标签： arraystypescriptobject

Answer 1

如果您使用诸如Underscore之类的实用程序库，这将容易得多。

import * as _ from "underscore";

let groups1 = _.groupBy(origData, (p) => p.name);
let pokemonGroups = Object.keys(groups1).map((type) =>
    ({ name: type, pokemon: groups1[type].map(({name, ...rest}) => rest) }));