Як порівняти масив формату 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"},
];

Тут я хочу порівняти VALUE, який присутній у першому, array(columnNames)та KEYS, який присутній у другому масиві. Якщо вона дорівнює, то я хочу висунути ці відповідні дані з другого 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

— Правен Сіванадіяр
джерело

Ви зробили спробу на це самостійно?

— 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

Ви можете надати 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);

Розгорніть фрагмент

Або більш налагоджена версія:

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)); ". Дякую у пристосованості!

— Praveen Sivanadiyar

@PraveenSivanadiyar, будь ласка, дивіться мою оновлену відповідь

— StepUp

@StepUp Привіт, у мене проблема. Не могли б ви вирішити мою проблему? :) Ось посилання [ stackoverflow.com/questions/60089217 / ...

— Sakkeer

Зберігайте всі назви полів у змінній, 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)
});

Робоча демонстрація

— Адріта Шарма
джерело

Ви можете, будь ласка, пояснити, що тут буде відбуватися? keys.forEach (key => {obj [key] = item [key]});

— Praveen Sivanadiyar

Звичайно, додаю опис

— Адріта Шарма

@PraveenSivanadiyar Додано опис. дайте мені знати, чи це було корисно

— Адріта Шарма

objце новий порожній об’єкт. obj[key] = item[key] означає, взявши перший цикл, ключ - "Ім'я", таким obj[key]буде {Name: }і item.Nameє Praveen, тому результат буде {Name: "Praveen" }

— Адріта Шарма

Так, тепер я розумію, а також добре працює з моїм кодом. велике спасибі @Adrita Sharma.

— Praveen Sivanadiyar