Wie vergleiche ich das JSON-Format-Array VALUE und KEY, um ein neues Array zu erstellen? in Winkel 5

10

Hier ist mein erstes JSON-Array-Format:

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

Hier ist mein erstes JSON-Array-Format:

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"},
];  

Hier möchte ich den array(columnNames)Wert vergleichen, der im ersten Array vorhanden ist, und KEYS, der im zweiten Array vorhanden ist. Wenn es gleich ist, möchte ich diese übereinstimmenden Daten von der zweiten array(rowData)in das neue Array verschieben.

Und ich möchte mein Endergebnis so sehen:

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"},
];
Praveen Sivanadiyar
quelle
Haben Sie das selbst versucht?
TylerH

Antworten:

10

Holen Sie sich die Felder von jedem Objekt in Ihrem columnNamesArray mit .map(). Ordnen Sie dann jedes Objekt rowDataeinem neuen Objekt zu, das mit erstellt wurde .reduce()und das nur die Schlüssel aus Ihrem fieldsArray enthält:

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 */

Wenn Sie unterstützen können Object.fromEntries()(das ein Array verschachtelter [key, value]Paare verwendet und daraus ein Objekt erstellt), müssen Sie Folgendes nicht verwenden .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 */

Nick Parsons
quelle
Hallo, ich habe ein Problem. Könnten Sie mein Problem lösen? :) Hier ist der Link [ stackoverflow.com/questions/60089217/…
Sakkeer A
5

Sie können filterIhre Objekteigenschaften basierend auf dem columnNamesArray festlegen und dann einfach ein Objekt erstellen mit Object.fromEntries:

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

Ein Beispiel:

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

Oder mehr debuggbare Version:

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

Ein Beispiel:

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

Object.fromEntries ist die Methode, die eine Liste von Schlüssel-Wert-Paaren in ein Objekt umwandelt.

Die folgende Zeile bedeutet, dass wir das Array basierend auf dem Array filtern () .allProperiescolumnNames

Die Methode some () gibt zurück, truewenn eine Eigenschaft von columnNamesvorhanden ist in allProperties:

let filteredProperties = allProperties.filter(([k, v]) => 
     columnNames.some(cl => cl.field == k)); 
StepUp
quelle
Vielen Dank für Ihre Antwort. Ich habe Zweifel daran, ich bin ein Anfänger von Winkel 8 genau ich weiß nicht, was "Object.fromEntries" ist, und können Sie auch dieses erklären "let filteredProperties = allProperties.filter (([k, v]) => columnNames.some (cl => cl.field == k)); ". Vielen Dank im Voraus!
Praveen Sivanadiyar
@PraveenSivanadiyar bitte, siehe meine aktualisierte Antwort
StepUp
@StepUp Hallo, ich habe ein Problem. Könnten Sie mein Problem lösen? :) Hier ist der Link [ stackoverflow.com/questions/60089217/…
Sakkeer A
3

Speichern Sie alle Feldnamen in einer Variablen keysmit .map . Durchlaufen Sie dann das ursprüngliche Array und erstellen Sie ein Objekt mit den darin enthaltenen Eigenschaftenkeys

Versuchen Sie es so:

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

Arbeitsdemo

Adrita Sharma
quelle
Können Sie bitte erklären, was hier passieren wird? keys.forEach (key => {obj [key] = item [key]});
Praveen Sivanadiyar
Klar, ich
füge
@PraveenSivanadiyar Beschreibung hinzugefügt. Lassen Sie mich wissen, ob dies hilfreich war
Adrita Sharma
1
objist ein neues leeres Objekt. obj[key] = item[key] bedeutet, in der ersten Schleife ist der Schlüssel "Name", also obj[key]wird {Name: }und item.Nameist Praveen, so wird das Ergebnis sein {Name: "Praveen" }
Adrita Sharma
Ja, jetzt verstehe ich und es funktioniert auch gut mit meinem Code. Vielen Dank @Adrita Sharma.
Praveen Sivanadiyar