Zmień tablicę w javascript na prostszy obiekt

17

Mam prosty JSON z tablicą, która zawiera dalsze obiekty itp., Takie jak to:

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

Ale tak naprawdę chcę takiego obiektu:

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

Chcę więc zredukować tablicę do prostych par klucz-wartość, które znajdują się w tablicy, a nawet w obiekcie (klucze są unikalne). Czy ktoś ma pomysł, jak to zmniejszyć za pomocą niektórych z tych fajnych funkcji tablicowych? Wymyśliłem tylko coś takiego dla każdego i budując własność obiektu „ręcznie” dla własności, ale pamiętam, że było kilka fajnych rzeczy dla tablicy, takich jak „zmniejsz”, operator rozkładania (...), mapa, każdy, niektóre itp.

Próbowałem z czymś takim jak:

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

Ale dostałem tylko komunikat o błędzie TypeError: Invalid attempt to destructure non-iterable instance

Edycja: Wszystkie trzy odpowiedzi działają idealnie dobrze. Dzięki.

Marcel Grüger
źródło
2
Możliwy duplikat Jak sformatować listę tablic do json
adiga
groupBędą ignorowane?
Bergi,
Tak, grupę można zignorować, moim pomysłem było, aby mój współpracownik użył tego samego klucza na różnych ekranach z różnymi tłumaczeniami, ale nie mogę znaleźć dla niego żadnego rzeczywistego zastosowania. Ale to kolejne pytanie na znacznie później :)
Marcel Grüger

Odpowiedzi:

11

Zasadniczo musisz użyć forEachzamiast mapfunkcji, a następnie możesz zbudować ten obiekt do dowolnej pary klucz-wartość, którą chcesz zachować.

Spróbuj tego, rozwiąże Twój problem.

var temp = {};

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

console.log(temp)

Uwaga: tutaj nie używamy, mapponieważ chcemy zwrócić obiekt, a nie tablicę, więc możemy użyć reducefunkcji, aby to zrobić, ale pomyślałem, że byłoby to proste i łatwe do zrozumienia, czego chcemy i co robimy tutaj.

ma_dev_15
źródło
10

Możesz użyć reducefunkcji javascript, aby utworzyć pusty obiekt i umieścić w nim każdy klucz i wartość.

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

Edycja: Niezła sugestia Donny'ego Verduijna . Możesz użyć restrukturyzacji es6, aby napisać funkcję krótszą.

const newData = data.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {});
Maxime Girou
źródło
3
Jeśli lubisz korzystać ze składni ES6, możesz również zaimplementować funkcję redukcji w ten sposób(acc, { key, value }) => ({ ...acc, [key]: value })
Donny Verduijn
1
Możesz także użyć przecinka, aby uniknąć zwrotu:const newData = data.reduce((acc, row) => (acc[row.key] = row.value, acc), {});
ElChiniNet
4
Z ciekawości. Jakiś czas temu testowałem wydajność operatora rozprzestrzeniania w celu destrukcji obiektów, a nawet jeśli prawdą jest, że czasami poprawia on czytelność kodu, ma on wysoki koszt: Measurethat.net/Benchmarks/Show/6194/5/ …
ElChiniNet
@ElChiniNet Przypadek testowy, który łączysz, dotyczy rozkładania tablic, a nie rozkładów obiektowych. (Ale tak, wielokrotne rozprzestrzenianie się na nowy obiekt jest znacznie wolniejsze niż mutowanie pojedynczego obiektu)
Bergi
1
@Bergi, tutaj masz porównanie tego konkretnego kodu: Measurethat.net/Benchmarks/Show/6318/0/...
ElChiniNet
6

użyj z Array#mapjego kluczem i wartością jako obiektem i Object.assignukrytą wartością tablicy do obiektu

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
źródło
2

Możesz użyć ES6 Mapdo tego celu, Object.fromEntriesaby mapponownie przekonwertować Object.

Aby uzyskać więcej informacji o mapie

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
źródło