Filtering the data from object

Question

I'm trying object destructuring to filter the data with new array but, it gives me the same data.

I would like to filter out object properties in order to have in the new array objects with only the following 3 properties: name, occupation, gender

Trying to get any advice.

const employee = [
  {
    name: 'sam',
    occupation: 'designer',
    gender: 'M',
    email: 'sam.camp@around.com',
    salary: 40000,
    location: 'Canada'
  },
  {
    name: 'sara',
    occupation: 'developer',
    gender: 'M',
    email: 'sara.cap@around.com',
    salary: 30000,
    location: 'USA'
  },
];

function filterData(arr) {
  arr.map(( name, occupation, gender ) => ({ name, occupation, gender }));

  return arr
}

console.log(filterData(employee));

What are you wanting it to output? The `filterData` function takes in `arr` and then returns it. — evolutionxbox, May 07 '21 at 15:16
`return arr.map(({ name, occupation, gender }) => ({ name, occupation, gender }))` — Andreas, May 07 '21 at 15:20
Possible duplicate: [Destructuring array of objects in es6](https://stackoverflow.com/questions/49413544/destructuring-array-of-objects-in-es6) — Andreas, May 07 '21 at 15:21
Your edits don't make any sense and broke the question completely... — Andreas, May 07 '21 at 15:47
@Andreas Very elegant solution in 1 single line, it works - you Rock — Jürgen Fink, May 07 '21 at 18:33

score 0 · Answer 1 · answered May 07 '21 at 15:22

Your IDE cannot infer the type of the array that is going to be passed to the function, so it'll be any type.

You can use JSDocs do define a type for the array though.

// @ts-check

// Typedefinitions

/**
 * @typedef EmployeeRecord
 *
 * @property {string} name
 * @property {string} occupation
 * @property {string} email
 * @property {string} gender
 * @property {number} salary
 */

/** @type {Array<EmployeeRecord>} */
const employeeRecords = [
  {
    name: "sam",
    occupation: "designer",
    gender: "M",
    email: "sam.doe@somewhere.com",
    salary: 40000,
  },
  {
    name: "sara",
    occupation: "developer",
    gender: "M",
    email: "sara.eyre@somewhere.com",
    salary: 10000,
  },
];

/**
 *
 * @param {Array<EmployeeRecord>} arr Array of employee records
 * @returns
 */
function filterData(arr) {
  const [{ name, occupation, gender }] = arr;

  return arr;
}

console.log(filterData(employeeRecords));

Javascript is a dinamically typed language, so it only makes sense if the IDE is trying to infer the types (which in that case wasn't possible). The original question was way different too. — Eder Lima, May 07 '21 at 16:48

score 0 · Accepted Answer · answered May 07 '21 at 15:22

So, it looks like you want to "pluck" key-value pairs for each item.

const employeeRecords = [{
  name: 'sam',
  occupation: 'designer',
  gender: 'M',
  email: 'sam.doe@somewhere.com',
  salary: 40000,
}, {
  name: 'sara',
  occupation: 'developer',
  gender: 'M',
  email: 'sara.eyre@somewhere.com',
  salary: 10000,
}];

const pluckData = (arr) =>
  arr.map(({ name, occupation, gender }) => ({ name, occupation, gender }));

console.log(pluckData(employeeRecords));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Alternatively, you could pass in an array of keys to pluck:

const employeeRecords = [{
  name: 'sam',
  occupation: 'designer',
  gender: 'M',
  email: 'sam.doe@somewhere.com',
  salary: 40000,
}, {
  name: 'sara',
  occupation: 'developer',
  gender: 'M',
  email: 'sara.eyre@somewhere.com',
  salary: 10000,
}];

const pluckData = (arr, ...keys) =>
  arr.map(item =>
    keys.reduce((acc, key) => ({ ...acc, [key]: item[key] }), {}));

console.log(pluckData(employeeRecords, 'name', 'occupation', 'gender'));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Like in the mentioned possible dupe – Andreas May 07 '21 at 15:25 — Andreas, May 07 '21 at 15:25

Jürgen Fink · Answer 3 · 2021-05-08T15:19:06.663

Try the following:

There might be a more elegant way, but it works.

const employee = [
  {
    name: 'sam',
    occupation: 'designer',
    gender: 'M',
    email: 'sam.camp@around.com',
    salary: 40000,
    location: 'Canada'
  },
  {
    name: 'sara',
    occupation: 'developer',
    gender: 'M',
    email: 'sara.cap@around.com',
    salary: 30000,
    location: 'USA'
  },
];

function filterData(arr) {
  let arrFiltered = arr.map(item => {
    let container = {};
    container.name = item.name;
    container.occupation = item.occupation;
    container.gender = item.gender;
    return container
  })
  return arrFiltered
};

console.log(filterData(employee));

Output:

[
  {
    name: 'sam',
    occupation: 'designer',
    gender: 'M'
  },
  {
    name: 'sara',
    occupation: 'developer',
    gender: 'M'
  }
]

By the way: I corrected property values for location: into strings

location: canada to location: "Canada" and location: USA to location: "USA"

Also, there was an issue with a variable in your code:

I changed console.log(filterData(employeeRecords)) to console.log(filterData(employee))

I hope I understood correctly your question and that this helps.

I just saw VERY elegant solution from @Andreas from comments above: (makes me look stupid, ha ha ha)

function filterData(arr) {
  return arr.map(({ name, occupation, gender }) => ({ name, occupation, gender }))
};

Congrats to @Andreas - I tested it and it works like a charm :-)

Filtering the data from object

3 Answers3