Jak porównać tablicę formatu JSON VALUE i KEY, aby utworzyć nową tablicę? w Angular 5

10

Oto mój pierwszy format tablicy JSON:

this.columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

Oto mój pierwszy format tablicy JSON:

this.rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"}, 
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];

Tutaj chcę porównać WARTOŚĆ, która jest obecna w pierwszej array(columnNames)i KLUCZE, która jest obecna w drugiej tablicy. Jeśli jest równy, to chcę wypchnąć te pasujące dane z drugiej array(rowData)do nowej tablicy.

Chcę mój wynik końcowy w ten sposób:

public rowData: any =[
  {Name : "Praveen",Address : "aiff",Age : "12"},
  {Name : "Akashay",Address : "xvn",Age : "15"},
  {Name : "Bala",Address : "hjk",Age : "16"}, 
  {Name : "Charu",Address : "sss",Age : "17"},
];
arrays angular comparison Praveen Sivanadiyar
źródło
Czy sam próbowałeś to zrobić?
TylerH

Odpowiedzi:

10

Chwyć pola z każdego obiektu w columnNamestablicy za pomocą .map(). Następnie przypisz każdy obiekt rowDatado nowego obiektu utworzonego za pomocą .reduce(), który zawiera tylko klucze z fieldstablicy:

const columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

const rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"}, 
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];  

const fields = columnNames.map(({field}) => field); // get array ["Name", "Address", "Age"]
const result = rowData.map( // map each object in rowData to a new object
  o => fields.reduce((obj, k) => ({...obj, [k]: o[k]}), {})
  //    ^^ construct the new object, using reduce, spread syntax and computed property names
);

console.log(result);
.as-console-wrapper { max-height: 100% !important;} /* ignore */
Rozwiń fragment kodu

Jeśli możesz obsługiwać Object.fromEntries()(która pobiera tablicę zagnieżdżonych [key, value]par i buduje z nich obiekt), nie musisz używać .reduce():

const columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

const rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"}, 
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];  

const fields = columnNames.map(({field}) => field);
const result = rowData.map( 
  o => Object.fromEntries(fields.map(k => [k, o[k]]))
);

console.log(result);
.as-console-wrapper { max-height: 100% !important;} /* ignore */
Rozwiń fragment kodu

Nick Parsons
źródło
Cześć, mam problem. Czy możesz rozwiązać mój problem? :) Oto link [ stackoverflow.com/questions/60089217/…
Sakkeer A
5

Możesz filterustawić właściwości obiektu na podstawie columnNamestablicy, a następnie po prostu utworzyć obiekt, używając Object.fromEntries:

const result = rowData.map(s => Object.fromEntries(
    Object.entries(s).filter(([k, v]) => columnNames.some(cl => cl.field == k))));

Przykład:

let columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

let rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"},
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];

const result = rowData.map(s => Object.fromEntries(
    Object.entries(s).filter(([k, v]) => columnNames.some(cl => cl.field == k))));
console.log(result);
Rozwiń fragment kodu

Lub bardziej debugowalna wersja:

const result = rowData.map(s => {
  let allProperties = Object.entries(s);
  let filteredProperties = allProperties.filter(([k, v]) => 
      columnNames.some(cl => cl.field == k));
  let result = Object.fromEntries(filteredProperties);
  return result;
})

Przykład:

let columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

let rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"},
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];

const result = rowData.map(s => {
  let allProperties = Object.entries(s);
  let filteredProperties = allProperties.filter(([k, v]) => 
      columnNames.some(cl => cl.field == k));
  let result = Object.fromEntries(filteredProperties);
  return result;
})
Rozwiń fragment kodu

Object.fromEntries to metoda, która przekształca listę par klucz-wartość w obiekt.

Poniższy wiersz oznacza, że filtrujemy () allProperies tablicę na podstawie columnNamestablicy.

metoda some () zwraca, truejeśli jakaś właściwość parametru columnNamesistnieje w allProperties:

let filteredProperties = allProperties.filter(([k, v]) => 
     columnNames.some(cl => cl.field == k));
StepUp
źródło
Dziękuję bardzo za twoją odpowiedź. mam co do tego wątpliwości, jestem początkującym w Angular 8 dokładnie nie wiem, co to jest „Object.fromEntries”, a także mogę wyjaśnić ten „niech filterProperties = allProperties.filter (([k, v]) => columnNames.some (cl => cl.field == k)); ". Dziękuję z góry!
Praveen Sivanadiyar
@PraveenSivanadiyar, proszę zobaczyć moją zaktualizowaną odpowiedź
StepUp
@StepUp Cześć, mam problem. Czy możesz rozwiązać mój problem? :) Oto link [ stackoverflow.com/questions/60089217/…
Sakkeer A
3

Przechowuj wszystkie nazwy pól w zmiennej keysza pomocą .map . Następnie przejdź przez oryginalną tablicę i utwórz obiekt posiadający właściwości w nim zawartekeys

Spróbuj tak:

let keys = this.columnNames.map(x => x.field);

this.rowData.forEach(item => {
  let obj = {}
  keys.forEach(key => {
    obj[key] = item[key]
  });
  this.result.push(obj)
});

Demo pracy

Adrita Sharma
źródło
Czy możesz wyjaśnić, co się tutaj stanie? keys.forEach (key => {obj [key] = item [key]});
Praveen Sivanadiyar
Jasne,
dodaję
@PraveenSivanadiyar Dodano opis. daj mi znać, czy to było pomocne
Adrita Sharma
1
objto nowy pusty obiekt. obj[key] = item[key] środki, biorąc pierwszą pętlę, kluczem jest „Nazwa”, więc obj[key]będzie {Name: }i item.Nameto Praveen, więc wynik będzie {Name: "Praveen" }
Adrita Sharma
Tak, teraz rozumiem, a także działa dobrze z moim kodem. dziękuję bardzo @Adrita Sharma.
Praveen Sivanadiyar