[Vuejs]-From an array of objects, get specific properties

by

-1👍

✅

let users = [{
    "id": 9,
    "name": "Sulaymon",
    "family": "Yahyaei",
    "email": "sulaymonhg@etlgr.com",
    "tel": "(91) 247-52-15",
    "isActive": 0,
    "level": "User",
    "email_verified_at": null,
    "created_at": "2019-10-30 04:56:18",
    "updated_at": "2019-10-30 04:56:18"
    },
    {
    "id": 8,
    "name": "Rasul",
    "family": "Irmatov",
    "email": "Rasul@etlgr.com",
    "tel": "(91) 524-57-96",
    "isActive": 0,
    "level": "User",
    "email_verified_at": null,
    "created_at": "2019-10-24 12:28:45",
    "updated_at": "2019-10-24 12:28:45"
    }];
let columns = [
  {label: 'Name', name: 'name', show: true},
  {label: 'Family', name: 'family', show: true},
  {label: 'Email', name: 'email', show: true},
  {label: 'Telephone', name: 'tel', show: true},
  {label: 'Level', name: 'level', show: true},
  {label: 'Date Added', name: 'created_at', show: false},
  {label: 'Email Verification', name: 'email_verified_at',show: false},
  {label: 'Updated At', name: 'updated_at', show: false},
  {label: 'Status', name: 'isActive', show: false},
];

users.map((user) => {
	return columns.filter(column => column.show).reduce((acc, column) => {
		acc[column.name] = user[column.name];
		return acc;
}, {});
})
👤Maharjun M

0👍

let users = [{
    "id": 9,
    "name": "Sulaymon",
    "family": "Yahyaei",
    "email": "sulaymonhg@etlgr.com",
    "tel": "(91) 247-52-15",
    "isActive": 0,
    "level": "User",
    "email_verified_at": null,
    "created_at": "2019-10-30 04:56:18",
    "updated_at": "2019-10-30 04:56:18"
}, {
    "id": 8,
    "name": "Rasul",
    "family": "Irmatov",
    "email": "Rasul@etlgr.com",
    "tel": "(91) 524-57-96",
    "isActive": 0,
    "level": "User",
    "email_verified_at": null,
    "created_at": "2019-10-24 12:28:45",
    "updated_at": "2019-10-24 12:28:45"
}]

let columns = [
  {label: 'Name', name: 'name', show: true},
  {label: 'Family', name: 'family', show: true},
  {label: 'Email', name: 'email', show: true},
  {label: 'Telephone', name: 'tel', show: true},
  {label: 'Level', name: 'level', show: true},
  {label: 'Date Added', name: 'created_at', show: false},
  {label: 'Email Verification', name: 'email_verified_at',show: false},
  {label: 'Updated At', name: 'updated_at', show: false},
  {label: 'Status', name: 'isActive', show: false},
];

let userData = [];

users.forEach(user => {
  var obj = {};
  
  columns.forEach(col => {
    if (col.show) {
      obj[col.name] = user[col.name]
    }
  });
  userData.push(obj);
});

console.log(userData);
👤chans

0👍

You can try using map and filter to achieve the result as below

let users = [{"id": 9,"name": "Sulaymon","family": "Yahyaei","email": "sulaymonhg@etlgr.com","tel": "(91) 247-52-15","isActive": 0,"level": "User","email_verified_at": null,"created_at": "2019-10-30 04:56:18","updated_at": "2019-10-30 04:56:18"}, {"id": 8,"name": "Rasul","family": "Irmatov","email": "Rasul@etlgr.com","tel": "(91) 524-57-96","isActive": 0,"level": "User","email_verified_at": null,"created_at": "2019-10-24 12:28:45","updated_at": "2019-10-24 12:28:45"}]
  , columnsToShow = [{label: 'Name', name: 'name', show: true},{label: 'Family', name: 'family', show: true},{label: 'Email', name: 'email', show: true},{label: 'Telephone', name: 'tel', show: true},{label: 'Level', name: 'level', show: true},{label: 'Date Added', name: 'created_at', show: false},{label: 'Email Verification', name: 'email_verified_at',show: false},{label: 'Updated At', name: 'updated_at', show: false},{label: 'Status', name: 'isActive', show: false},
                    ].filter(d => d.show).map(d => d.name)

let result = users.map(d => Object.assign(...columnsToShow.map(c => ({ [c]: d[c] }))))

console.log(result)
👤Nitish Narang

Leave a comment