How to filter and map array of objects in JavaScript? [duplicate]

Question

I have an array of objects,
From which I want to conditionally create another array of objects.

Eg. -

var devs = [
    {
        name: 'A',
        age: 26,
        tech: ['JavaScript','React'],
        addr:{
            country:'India',
            city:'Pune'
        }
    },
    {
        name: 'B',
        age: 25,
        tech: ['Node','AngularJs'],
        addr:{
            country:'USA',
            city:'NY'
        }
    },
    {
        name: 'C',
        age: 27,
        tech: ['React','AWS'],
        addr:{
            country:'UK',
            city:'London'
        }
    }
]

I want an Array of objects who have 'React' in their 'tech' field array,
And only want to display their Name and Tech,
The following is the expected output -

[
    {
        name: 'A',
        tech: ['JavaScript','React']
    },
    {
        name: 'C',
        tech: ['Java','React'],
    }
]

I know for conditional purpose filter method can be used,
But how do I leave out the unnecessary fields from the array of objects?
Can map method be used here? If so how do I implement it?

Following is my half cooked code -

var filteredDevs = devs.filter(temp => temp.tech.includes('React'));

As you guessed in your title, yes you should use map. Have you tried it? — Bergi
– Bergi, Commented Mar 2, 2019 at 17:37
@Bergi I knew it had to be used, but didn't know how to implement on object array, still learning :D — Dev1ce
– Dev1ce, Commented Mar 2, 2019 at 17:41
@AniruddhaRaje Write a function that can take one of these objects and returns a new object of the desired shape. Then pass that function to map — Bergi
– Bergi, Commented Mar 2, 2019 at 17:43

Amardeep Bhowmick · Accepted Answer · 2019-03-02 17:49:29Z

You can use Array.filter and Array.map to do it, filter using the Array.includes where you check for the presence of React in the tech array.

Second step is to map to the desired object by retaining only name and tech properties from the original object.

const devs = [{"name":"A","age":26,"tech":["JavaScript","React"],"addr":{"country":"India","city":"Pune"}},{"name":"B","age":25,"tech":["Node","AngularJs"],"addr":{"country":"USA","city":"NY"}},{"name":"C","age":27,"tech":["Java","AWS"],"addr":{"country":"UK","city":"London"}}];
const devReact = devs.filter(obj => obj.tech.includes("React")).map(obj => ({"name":obj.name, "tech":obj.tech}));
console.log(devReact);

You can also do it in one shot using Array.reduce, where you accumulate only those objects having React in the array.

const devs = [{"name":"A","age":26,"tech":["JavaScript","React"],"addr":{"country":"India","city":"Pune"}},{"name":"B","age":25,"tech":["Node","AngularJs"],"addr":{"country":"USA","city":"NY"}},{"name":"C","age":27,"tech":["Java","AWS"],"addr":{"country":"UK","city":"London"}}];
const devReact = devs.reduce((acc, ele) =>  ele.tech.includes("React") ? acc.concat({"name": ele.name, "tech":ele.tech}): acc ,[]);
console.log(devReact);

Shidersz · Accepted Answer · 2019-03-02 17:47:20Z

I will better use Array.reduce() for this task, to loop only once over the input data.

var devs = [
    {
        name: 'A',
        age: 26,
        tech: ['JavaScript','React'],
        addr: {country:'India', city:'Pune'}
    },
    {
        name: 'B',
        age: 25,
        tech: ['Node','AngularJs'],
        addr: {country:'USA', city:'NY'}
    },
    {
        name: 'C',
        age: 27,
        tech: ['React','AWS'],
        addr: {country:'UK', city:'London'}
    }
];

let res = devs.reduce((acc, {name, tech}) =>
{
    tech.includes("React") && acc.push({name, tech});
    return acc;
}, []);

console.log(res);

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

Maheer Ali · Accepted Answer · 2019-03-02 17:37:52Z

2

You can use Array.prototype.map() to remove unnecessary fields

var devs = [
    {
        name: 'A',
        age: 26,
        tech: ['JavaScript','React'],
        addr:{
            country:'India',
            city:'Pune'
        }
    },
    {
        name: 'B',
        age: 25,
        tech: ['Node','AngularJs'],
        addr:{
            country:'USA',
            city:'NY'
        }
    },
    {
        name: 'C',
        age: 27,
        tech: ['Java','AWS'],
        addr:{
            country:'UK',
            city:'London'
        }
    }
]

let newArr =devs.filter(temp => temp.tech.includes('React')).map(({name,tech}) => ({name,tech}));
console.log(newArr);

answered Mar 2, 2019 at 17:37

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Comments

Ele · Accepted Answer · 2019-03-02 17:46:13Z

You can use the filter + map functions, however that approach uses two loops for doing what you want.

This alternative uses the function reduce to generate the desired output

var devs = [    {        name: 'A',        age: 26,        tech: ['JavaScript','React'],        addr:{            country:'India',            city:'Pune'        }    },    {        name: 'B',        age: 25,        tech: ['Node','AngularJs'],        addr:{            country:'USA',            city:'NY'        }    },    {        name: 'C',        age: 27,        tech: ['React','AWS'],        addr:{            country:'UK',            city:'London'        }    }],
    result = devs.reduce((a, {name, tech}) => {
      if (tech.includes('React')) a.push({name, tech});
      return a;
    }, []);

console.log(result);

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

Nina Scholz · Accepted Answer · 2019-03-02 17:50:16Z

1

You could filter and map the wanted properties.

var devs = [{ name: 'A', age: 26, tech: ['JavaScript', 'React'], addr: { country: 'India', city: 'Pune' } }, { name: 'B', age: 25, tech: ['Node', 'AngularJs'], addr: { country: 'USA', city: 'NY' } }, { name: 'C', age: 27, tech: ['React', 'AWS'], addr: { country: 'UK', city: 'London' } }],
    result = devs
        .filter(({ tech }) => tech.includes('React'))
        .map(({ name, tech }) => ({ name, tech }));

console.log(result);

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

edited Mar 2, 2019 at 17:50

answered Mar 2, 2019 at 17:36

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

How to filter and map array of objects in JavaScript? [duplicate]

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Related