วิธีเปรียบเทียบอาเรย์รูปแบบ JSON VALUE และ KEY เพื่อสร้างอาเรย์ใหม่ ในเชิงมุม 5

นี่คือรูปแบบอาร์เรย์ JSON แรกของฉัน:

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

นี่คือรูปแบบอาร์เรย์ 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"},
];

ที่นี่ฉันต้องการเปรียบเทียบค่าที่มีอยู่ในแรกarray(columnNames)และคีย์ที่มีอยู่ในอาร์เรย์ที่สอง ถ้ามันเท่ากันแล้วฉันต้องการที่จะผลักดันข้อมูลที่ตรงกันจากที่สองarray(rowData)ไปยังอาร์เรย์ใหม่

และฉันต้องการผลลัพธ์สุดท้ายของฉันเช่นนี้:

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
แหล่งที่มา

คุณลองด้วยตัวเองหรือไม่?

— TylerH

คำตอบ:

คว้าเขตข้อมูลจากแต่ละวัตถุในของคุณอาร์เรย์ใช้columnNames .map()จากนั้นจับคู่แต่ละวัตถุเข้าrowDataกับวัตถุใหม่ที่สร้างขึ้นโดยใช้.reduce()ซึ่งมีเพียงคีย์จากfieldsอาร์เรย์ของคุณ:

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

ขยายตัวอย่างข้อมูล

หากคุณสามารถรองรับObject.fromEntries()(ซึ่งใช้อาร์เรย์ของ[key, value]คู่ซ้อนกันและสร้างวัตถุจากพวกเขา) จากนั้นไม่จำเป็นต้องใช้.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 */

ขยายตัวอย่างข้อมูล

— นิคพาร์สันส์
แหล่งที่มา

สวัสดีฉันมีปัญหา คุณช่วยแก้ปัญหาของฉันได้ไหม :) นี่คือลิงค์ [ stackoverflow.com/questions/60089217/…

— Sakkeer A

คุณสามารถfilterคุณสมบัติวัตถุของคุณตามcolumnNamesอาร์เรย์แล้วเพียงแค่สร้างวัตถุโดยใช้Object.fromEntries:

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

ตัวอย่าง:

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

ขยายตัวอย่างข้อมูล

หรือเวอร์ชันที่สามารถ 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;
})

ตัวอย่าง:

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เป็นวิธีการที่แปลงรายการคู่คีย์ - ค่าเป็นวัตถุ

แถวต่อไปนี้หมายความว่าเรากรอง () allProperiesอาร์เรย์ตามcolumnNamesอาร์เรย์

some ()วิธีการคืนtrueถ้าทรัพย์สินบางส่วนที่columnNamesมีอยู่ในallProperties:

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

— ก้าวขึ้น
แหล่งที่มา

ขอบคุณมากสำหรับคำตอบของคุณ ฉันมีข้อสงสัยว่าฉันเป็นผู้เริ่มต้นของเชิงมุม 8 แน่นอนว่าฉันไม่ทราบว่า "Object.fromEntries" คืออะไรและคุณสามารถโปรดอธิบายสิ่งนี้ "ให้ filteredProperties = allProperties.filter (([k, v]) => columnNames.some (cl => cl.field == k)); " ขอบคุณใน adavnce!

— Praveen Sivanadiyar

@PraveenSivanadiyar โปรดดูคำตอบที่อัปเดตของฉัน

— StepUp

@ StepUp สวัสดีฉันมีปัญหา คุณช่วยแก้ปัญหาของฉันได้ไหม :) นี่คือลิงค์ [ stackoverflow.com/questions/60089217/…

— Sakkeer A

เก็บทุกชื่อเขตข้อมูลในตัวแปรkeysโดยใช้.map จากนั้นวนซ้ำอาร์เรย์เดิมและสร้างวัตถุที่มีคุณสมบัติอยู่keys

ลองแบบนี้

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

การสาธิตการทำงาน

— Adrita Sharma
แหล่งที่มา

คุณกรุณาอธิบายสิ่งที่จะเกิดขึ้นที่นี่ได้ไหม keys.forEach (key => {obj [key] = item [key]});

— Praveen Sivanadiyar

แน่นอนว่าฉันกำลังเพิ่มคำอธิบาย

— Adrita Sharma

@PraveenSivanadiyar เพิ่มคำอธิบายแล้ว แจ้งให้เราทราบหากนี่เป็นประโยชน์

— Adrita Sharma

objเป็นวัตถุที่ว่างเปล่าใหม่ obj[key] = item[key] หมายถึงการใช้วงแรกที่สำคัญคือ "ชื่อ" ดังนั้นobj[key]จะเป็น{Name: }และitem.Nameเป็นPraveenดังนั้นผลลัพธ์จะเป็น {Name: "Praveen" }

— Adrita Sharma

ใช่ตอนนี้ฉันเข้าใจและยังทำงานได้ดีกับรหัสของฉัน ขอบคุณ @Adrita Sharma มาก

— Praveen Sivanadiyar