Filter object property from an array of objects in javascript

Question

Honestly, I don't know how to explain this problem. I am trying to explain the problem with an example. Suppose I have two array like this

const columns = [
  {name: 'total_sent', title: 'Total Sent'},
  {name: 'date', title: 'Date'},
  {name: 'total_post', title: 'Total Post'},
];

const tableData = [
  {id: 1, total_post: 101, action: 'deleted', date: new Date(), total_sent: 200},
  {id: 2, total_post: 401, action: 'deleted', date: new Date(), total_sent: 250},
  {id: 3, total_post: 151, action: 'edited', date: new Date(), total_sent: 110},
  {id: 4, total_post: 361, action: 'deleted', date: new Date(), total_sent: 20},
  {id: 5, total_post: 231, action: 'edited', date: new Date(), total_sent: 260},
];

Now I want a new array like tableData but the objects should have only total_sent, total_post, and date property. These selected properties are from the columns array.

expected output has to be like this

const newArr = [
  { total_post: 101, date: new Date(), total_sent: 200 },
  { total_post: 401, date: new Date(), total_sent: 250 },
  { total_post: 151, date: new Date(), total_sent: 110 },
  { total_post: 361, date: new Date(), total_sent: 20 },
  { total_post: 231, date: new Date(), total_sent: 260 },
];

map and filter method are more preferable.

filter object attributes index by index of array in a loop .. check this [https://stackoverflow.com/questions/38750705/filter-object-properties-by-key-in-es6] — Shamsail, May 27 '21 at 06:06

score 0 · Answer 1 · answered May 27 '21 at 06:10

Brother you can try this. Thank you.

const columns = [
  {name: 'total_sent', title: 'Total Sent'},
  {name: 'date', title: 'Date'},
  {name: 'total_post', title: 'Total Post'},
];
const tableData = [
  {id: 1, total_post: 101, action: 'deleted', date: new Date(), total_sent: 200},
  {id: 2, total_post: 401, action: 'deleted', date: new Date(), total_sent: 250},
  {id: 3, total_post: 151, action: 'edited', date: new Date(), total_sent: 110},
  {id: 4, total_post: 361, action: 'deleted', date: new Date(), total_sent: 20},
  {id: 5, total_post: 231, action: 'edited', date: new Date(), total_sent: 260},
];

const newArr = tableData.map(el => {
  const newEl = {};
  columns.forEach(column => newEl[column.name] = el[column.name])
  
  return newEl;
});

console.log(newArr);

Thanks, brother. Then could you please mark the answer as excepted so that devs who will visit this question future can easily find the answer? — Showrin Barua, May 27 '21 at 11:32

score 0 · Answer 2 · answered May 27 '21 at 07:19

Using map and every:

const columns = [{name: 'total_sent', title: 'Total Sent'}, {name: 'date', title: 'Date'}, {name: 'total_post', title: 'Total Post'}];
const tableData = [{id: 1, total_post: 101, action: 'deleted', date: new Date(), total_sent: 200}, {id: 2, total_post: 401, action: 'deleted', date: new Date(), total_sent: 250}, {id: 3, total_post: 151, action: 'edited', date: new Date(), total_sent: 110}, {id: 4, total_post: 361, action: 'deleted', date: new Date(), total_sent: 20}, {id: 5, total_post: 231, action: 'edited', date: new Date(), total_sent: 260}];
const filterProps = columns.map(col => col.name);
const newArr = tableData.map(el => {
  const e = {...el};
  for (const prop in e) if (filterProps.every(filterProp => prop !== filterProp)) delete e[prop];
  return e;  
})

console.log(newArr);

score -1 · Answer 3 · answered May 27 '21 at 06:22

-1

You can try this.

const keys = columns.map((elem) => elem.name);

var result = tableData.map((elem) => {
  return _.pick(elem, keys);
});

Note this uses the LODASH pick function which adds an extra dependency.

answered May 27 '21 at 06:22

Jibin Bose

374
6

Filter object property from an array of objects in javascript

3 Answers3