Bagaimana cara membandingkan array format JSON VALUE dan KEY untuk membuat array baru? dalam Angular 5


10

Ini adalah format array JSON pertama saya:

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

Ini adalah format array JSON pertama saya:

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

Di sini saya ingin membandingkan VALUE yang ada di yang pertama array(columnNames)dan tombol-tombol yang ada di array kedua. Jika sama, maka saya ingin mendorong data yang cocok dari yang kedua array(rowData)ke array yang baru.

Dan saya ingin hasil akhir saya seperti ini:

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

Apakah Anda mencoba melakukan ini sendiri?
TylerH

Jawaban:


10

Raih bidang dari setiap objek dalam columnNamesarray Anda menggunakan .map(). Lalu, petakan setiap objek rowDatake objek baru yang dibuat menggunakan .reduce(), yang hanya menyertakan kunci dari fieldsarray Anda :

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

Jika Anda dapat mendukung Object.fromEntries()(yang mengambil array [key, value]pasangan bersarang dan membuat objek dari mereka), maka tidak perlu menggunakan .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 */


Hai Aku punya masalah. Bisakah Anda memecahkan masalah saya? :) Berikut ini tautannya [ stackoverflow.com/questions/60089217/…
Sakkeer A

5

Anda bisa filterproperti objek Anda berdasarkan columnNamesarray dan kemudian hanya membuat objek menggunakan Object.fromEntries:

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

Sebuah contoh:

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

Atau lebih banyak versi debuggable:

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

Sebuah contoh:

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 adalah metode yang mengubah daftar pasangan kunci-nilai menjadi objek.

Baris berikut berarti bahwa kami memfilter allProperies array () berdasarkan pada columnNamesarray.

beberapa () metode kembali truejika beberapa properti columnNamesada di allProperties:

let filteredProperties = allProperties.filter(([k, v]) => 
     columnNames.some(cl => cl.field == k)); 

Terima kasih banyak atas tanggapan Anda. saya ragu dalam hal itu, saya seorang pemula dari sudut 8 persis saya tidak tahu apa itu "Object.fromEntries", dan juga bisa tolong jelaskan ini "biarkan filteredProperties = allProperties.filter (([k, v]) => columnNames.some (cl => cl.field == k)); ". Terima kasih di sanavnce!
Praveen Sivanadiyar

@PraveenSivanadiyar tolong, lihat jawaban saya yang diperbarui
StepUp

@ LANGKAH Hai, saya punya masalah. Bisakah Anda memecahkan masalah saya? :) Berikut ini tautannya [ stackoverflow.com/questions/60089217/…
Sakkeer A

3

Simpan semua nama bidang dalam variabel keysmenggunakan .map . Kemudian putar melalui array asli dan buat objek yang memiliki propertikeys

Coba seperti ini:

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 yang Bekerja


Bisakah Anda jelaskan apa yang akan terjadi di sini? keys.forEach (key => {obj [key] = item [key]});
Praveen Sivanadiyar

Tentu, saya menambahkan deskripsi
Adrita Sharma

@PraveenSivanadiyar Menambahkan deskripsi. beri tahu saya jika ini membantu
Adrita Sharma

1
objadalah objek kosong baru. obj[key] = item[key] berarti, mengambil loop pertama, kuncinya adalah "Nama", sehingga obj[key]akan {Name: }dan item.Nameadalah Praveen, sehingga hasilnya akan {Name: "Praveen" }
Adrita Sharma

Ya, Sekarang saya mengerti dan juga berfungsi baik dengan kode saya. terima kasih banyak @Adrita Sharma.
Praveen Sivanadiyar
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.