Ändern Sie das Array in Javascript in ein einfacheres Objekt

17

Ich habe einen einfachen JSON mit einem Array, das weitere Objekte usw. wie folgt enthält:

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

Aber was ich wirklich will, ist ein Objekt wie dieses:

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

Daher möchte ich das Array auf einfache Schlüssel-Wert-Paare reduzieren, die sich innerhalb eines Arrays oder sogar eines Objekts befinden (Schlüssel sind eindeutig). Hat jemand eine Idee, wie man dies mit einigen dieser coolen Array-Funktionen reduzieren kann? Ich habe mir nur so etwas wie ein für jedes ausgedacht und das Objekt "von Hand" Eigenschaft für Eigenschaft erstellt, aber ich erinnere mich, dass es einige coole Dinge für das Array gab, wie "Reduzieren", den Spread-Operator (...), Karte, alle, einige usw.

Ich habe es mit so etwas versucht:

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

Aber das hat mir nur eine Fehlermeldung gebracht TypeError: Invalid attempt to destructure non-iterable instance

Bearbeiten: Alle drei Antworten funktionieren einwandfrei. Vielen Dank.

javascript arrays

— Marcel Grüger
quelle

2

Mögliches Duplikat der Formatierung der Array-Liste auf json

— adiga

Das groupsoll ignoriert werden?

— Bergi

Ja, die Gruppe kann ignoriert werden. Es war nur eine Idee meines Kollegen, denselben Schlüssel in verschiedenen Bildschirmen mit unterschiedlichen Übersetzungen zu verwenden, aber ich kann keine wirkliche Verwendung dafür finden. Aber das ist eine andere Frage für viel später :)

— Marcel Grüger

11

Grundsätzlich müssen Sie forEachanstelle der mapFunktion verwenden, und dann können Sie dieses Objekt für jedes Schlüssel- und Wertepaar erstellen, das Sie behalten möchten.

Versuchen Sie dies, es wird Ihr Problem lösen.

var temp = {};

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

console.log(temp)

Hinweis: Hier verwenden wir kein mapObjekt , da wir kein Array zurückgeben möchten. Daher können wir reducehier die Funktion verwenden, aber ich dachte, dies wäre einfach und leicht zu verstehen, was wir wollen und was wir hier tun.

— ma_dev_15
quelle

10

Mit der Javascript- reduceFunktion können Sie ein leeres Objekt erstellen und jeden Schlüssel und Wert darin einfügen.

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

Erweitern Sie das Snippet

Edit: Netter Vorschlag von Donny Verduijn . Sie können die es6-Destrukturierung verwenden, um die Funktion kürzer zu schreiben.

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

— Maxime Girou
quelle

3

Wenn Sie die ES6-Syntax verwenden möchten, können Sie die Reduktionsfunktion auch auf diese Weise implementieren(acc, { key, value }) => ({ ...acc, [key]: value })

— Donny Verduijn,

1

Sie können auch den Komma-Operator verwenden, um die Rückgabe zu vermeiden:const newData = data.reduce((acc, row) => (acc[row.key] = row.value, acc), {});

— ElChiniNet

4

Nur aus Neugier. Vor einiger Zeit habe ich die Leistung des Spread-Operators getestet, um Objekte zu zerstören, und selbst wenn es stimmt, dass es manchmal die Lesbarkeit des Codes verbessert, hat es hohe Kosten: messethat.net/Benchmarks/Show/6194/5/ …

— ElChiniNet

@ElChiniNet In dem von Ihnen verknüpften Testfall geht es um die Array-Streuung, nicht um die Objektverbreitung. (Aber ja, das wiederholte Ausbreiten in ein neues Objekt ist viel langsamer als das Mutieren eines einzelnen Objekts)

— Bergi

1

@Bergi, hier haben Sie einen Vergleich dieses spezifischen Codes: messethat.net/Benchmarks/Show/6318/0/…

— ElChiniNet

6

Verwenden Sie mit Array#mapseiner Funktion den Schlüssel und den Wert als Objekt und den Object.assignverdeckten Array-Wert für das Objekt

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)

Erweitern Sie das Snippet

— Prasanth
quelle

2

Sie können ES6 Mapfür diese Verwendung verwenden Object.fromEntries, um mapzurück zu konvertieren Object.

Weitere Informationen zu Map

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

Erweitern Sie das Snippet

— Akshay Bande
quelle