10

Here is my first JSON array format:

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

Here is my first 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"},
];

Here I want to to compare the VALUE which is present in the first array(columnNames) and KEYS which is present in the second array. If it's equal, then I want to push those matching data from the second array(rowData) into the new array.

And I want my final result like this:

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"},
];
Improve this question
1
  • Did you make an attempt at this yourself? Commented Jan 30, 2020 at 15:10

3 Answers 3

Reset to default
10

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

5

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));
Improve this answer

2 Comments

Thank u so much for your response. i have doubt in that, i am a beginner of angular 8 exactly i don't know what is "Object.fromEntries",and also can u please explain this one " let filteredProperties = allProperties.filter(([k, v]) => columnNames.some(cl => cl.field == k)); ". Thank u in adavnce!
@StepUp Hi, I have a problem. Could you solve my problem? :) Here is the link [stackoverflow.com/questions/60089217/…
3

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

Improve this answer

6 Comments

Can u please explain what will be happening here? keys.forEach(key => { obj[key] = item[key] });
Sure, I am adding the description
@PraveenSivanadiyar Added description. let me know if this was helpful
obj is a new empty object. obj[key] = item[key] means, taking the first loop,key is "Name", so obj[key] will be {Name: } and item.Name is Praveen, so the result will be {Name: "Praveen" }
Yeah, Now i understand and also its working fine with my code. thank u so much @Adrita Sharma.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.