Changer le tableau en javascript en objet plus simple

17

J'ai un JSON simple avec un tableau qui contient d'autres objets, etc. comme ceci:

languagePack:
[
  {
    'key': 'Username',
    'value': 'Benutzername',
    'group': 'default'
  },
  {
    'key': 'Password',
    'value': 'Passwort',
    'group': 'default'
  }
]

Mais ce que je veux vraiment, c'est un objet comme celui-ci:

languagePack: 
{
    'Username': 'Benutzername',
    'Password': 'Passwort'
}

Donc, je veux réduire le tableau à de simples paires clé-valeur qui se trouvent à l'intérieur d'un tableau ou même d'un objet (les clés sont uniques). Quelqu'un a-t-il une idée de la façon de réduire cela avec certaines de ces fonctions de tableau cool? Je n'ai trouvé que quelque chose comme un pour chacun et j'ai construit l'objet "à la main" pour la propriété, mais je me souviens qu'il y avait des choses sympas pour le tableau comme 'réduire', l'opérateur de propagation (...), la carte, tout, certains, etc.

Je l'ai essayé avec quelque chose comme:

var temp = this.languagePack.map(([key, value]) => ({key,value}))
console.log(temp)

Mais cela ne m'a fait qu'un message d'erreur TypeError: Invalid attempt to destructure non-iterable instance

Edit: Les trois réponses fonctionnent parfaitement bien. Merci.

Marcel Grüger
la source
2
Copie
Le groupdoit être ignoré?
Bergi
Oui, le groupe peut être ignoré, ce n'était qu'une idée de mon collègue d'utiliser la même clé dans différents écrans avec des traductions différentes, mais je ne trouve aucune utilisation réelle. Mais c'est une autre question pour bien plus tard :)
Marcel Grüger

Réponses:

11

Fondamentalement, vous devez utiliser forEachau lieu de mapfonction, puis vous pouvez créer cet objet à n'importe quelle paire de clés et de valeurs que vous souhaitez conserver.

Essayez ceci, cela résoudra votre problème.

var temp = {};

this.languagePack.forEach(({key,value}) => {
    temp[key] = value
})

console.log(temp)

Remarque: Ici, nous n'utilisons pas mapparce que nous voulons renvoyer un objet et non un tableau, nous pouvons donc utiliser la reducefonction ici pour le faire, mais j'ai pensé que ce serait simple et facile de comprendre ce que nous voulons et ce que nous faisons ici.

ma_dev_15
la source
10

Vous pouvez utiliser la reducefonction javascript pour créer un objet vide et y mettre chaque clé et valeur.

const data = [
  {
    'key': 'Username',
    'value': 'Benutzername',
    'group': 'default'
  },
  {
    'key': 'Password',
    'value': 'Passwort',
    'group': 'default'
  }
];

const newData = data.reduce((acc, row) => {
  acc[row.key] = row.value;
  return acc;
}, {});

console.log(newData);

Edit: Belle suggestion de Donny Verduijn . Vous pouvez utiliser la déstructuration es6 pour écrire la fonction plus court.

const newData = data.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {});
Maxime Girou
la source
3
Si vous aimez utiliser la syntaxe ES6, vous pouvez également implémenter la fonction de réduction de cette façon(acc, { key, value }) => ({ ...acc, [key]: value })
Donny Verduijn
1
En outre, vous pouvez utiliser l'opérateur virgule pour éviter le retour:const newData = data.reduce((acc, row) => (acc[row.key] = row.value, acc), {});
ElChiniNet
4
Juste comme une curiosité. Il y a quelque temps que je testais la performance de l'opérateur de diffusion aux objets déstructurant, et même s'il est vrai que , parfois , il améliore la lisibilité du code, il a un coût élevé: measurethat.net/Benchmarks/Show/6194/5/ …
ElChiniNet
@ElChiniNet Le cas de test que vous avez lié concerne la propagation de tableaux, pas la propagation d'objets. (Mais oui, la propagation répétée dans un nouvel objet est beaucoup plus lente que la mutation d'un seul objet)
Bergi
1
@Bergi, ici, vous avez une comparaison de ce code spécifique: MeasureMethat.net/Benchmarks/Show/6318/0/…
ElChiniNet
6

utiliser avec Array#mapson créer la clé et la valeur en tant qu'objet et la Object.assignvaleur de tableau caché à l'objet

const languagePack = [ { 'key': 'Username', 'value': 'Benutzername', 'group': 'default' }, { 'key': 'Password', 'value': 'Passwort', 'group': 'default' } ];

var res = Object.assign({},...languagePack.map(({key,value}) => ({[key]:value})))

console.log(res)

prasanth
la source
2

Vous pouvez utiliser ES6 Mappour cette utilisation Object.fromEntriespour convertir maprevenir à Object.

Pour plus d'informations sur la carte

let languagePack=
[{
  'key': 'Username',
  'value': 'Benutzername',
  'group': 'default'
},
{
  'key': 'Password',
  'value': 'Passwort',
  'group': 'default'
}];

let map = new Map();

languagePack.forEach((val)=>{
  map.set(val.key, val.value);
})
languagePack = Object.fromEntries(map);
console.log(languagePack);

Akshay Bande
la source