How to compare the JSON format array VALUE and KEY to create a new array? in Angular 5
Grab the fields from each object in your columnNames
array using .map()
. Then, map each object in rowData
to a new object created using .reduce()
, which only includes the keys from your fields
array:
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 */
If you can support Object.fromEntries()
(which takes an array of nested [key, value]
pairs and builds an object from them), then there is no need to use .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 */
You can filter
your object properties based on columnNames
array and then just create an object using Object.fromEntries
:
const result = rowData.map(s => Object.fromEntries(
Object.entries(s).filter(([k, v]) => columnNames.some(cl => cl.field == k))));
An example:
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);
Or more debuggable 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;
})
An example:
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 is the method which transforms a list of key-value pairs into an object.
The following row means that we filter() allProperies
array based on columnNames
array.
some() method returns true
if some property of columnNames
exists in allProperties
:
let filteredProperties = allProperties.filter(([k, v]) =>
columnNames.some(cl => cl.field == k));
Store all the field names in a variable keys
using .map . Then loop through the original array and create a object having the properties present in keys
Try like this:
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)
});
Working Demo