How to select particular items in an array and form a new array using ES6 JS /Lodash

Question

For example this is the original array:

const animals = [{
    name: "Lion",
    image: "a url",
    gender: "male",
    age: "2"
  },
  {
    name: "Lion",
    image: "a url",
    gender: "male",
    age: "3"
  },
  {
    name: "Lion",
    image: "a url",
    gender: "male",
    age: "4"
  },
  {
    name: "Lion",
    image: "a url",
    gender: "male",
    age: "6"
  },
  {
    name: "Tiger",
    image: "a url",
    gender: "male",
    age: "6"
  },
]

I want to form a new array that holds only unique datas & consisiting of only name and image

So the new array should look like

const newArray = [{
    name: "Lion",
    image: "a url"
  },
  {
    name: "Tiger",
    image: "a url"
  }

]

how can I form this newArray using less amount of code particularly using ES6 JS or using lodash

Ori Drori · Accepted Answer · 2017-11-04 14:27:55Z

Use _.uniqBy() to get the distinct values, and Array#map with _.pick() to get just the props you want:

const animals = [{"name":"Lion","image":"a url","gender":"male","age":"2"},{"name":"Lion","image":"a url","gender":"male","age":"3"},{"name":"Lion","image":"a url","gender":"male","age":"4"},{"name":"Lion","image":"a url","gender":"male","age":"6"},{"name":"Tiger","image":"a url","gender":"male","age":"6"}];

const result = _.uniqBy(animals, 'name').map((o) => _.pick(o, ['name', 'image']));

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

guest271314 · Accepted Answer · 2017-11-04 14:39:18Z

You can use object destructuring and Map to get unique values, and spread element to convert Map instance to an array

const animals = [{"name":"Lion","image":"a url","gender":"male","age":"2"},{"name":"Lion","image":"a url","gender":"male","age":"3"},{"name":"Lion","image":"a url","gender":"male","age":"4"},{"name":"Lion","image":"a url","gender":"male","age":"6"},{"name":"Tiger","image":"a url","gender":"male","age":"6"}];

let map = new Map;

animals.forEach(({name, image}) => {
 !map.has(name) && map.set(name, {name, image})
});

let res = [...map.values()];

console.log(res);

tilin · Accepted Answer · 2017-11-04 14:40:03Z

You can use reduce and findIndex to get unique values:

const animals = [
{
name: "Lion",
image: "a url",
gender: "male",
age: "2"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "3"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "4"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "6"
},
{
name: "Tiger",
image: "a url",
gender: "male",
age: "6"
},
];

console.log(animals.reduce((p,c)=>{
  if(p.findIndex(e=>e.name === c.name) === -1){
    p.push({
      name: c.name,
      image: c.image,
    });
  }
  return p;
},[]));

Adarsh Sreeram · Accepted Answer · 2017-11-04 14:52:43Z

1

You can even do this:

const data = _.uniqBy(animals, 'name').map((K) => {
         return { name: K.name, image: K.image };
           });

edited Nov 4, 2017 at 14:52

answered Nov 4, 2017 at 14:40

Adarsh Sreeram

96210 silver badges22 bronze badges

Comments

Developer Nodejs · Accepted Answer · 2017-11-04 16:09:33Z

const animals = [
{
name: "Lion",
image: "a url",
gender: "male",
age: "2"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "3"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "4"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "6"
},
{
name: "Tiger",
image: "a url",
gender: "male",
age: "6"
},
]

// ES6 Style

const newAnimals = new Set()

animals.forEach(e=>{
  const { name, image } = e

  const animal = { name, image }
  if(newAnimals.size == 0){
    newAnimals.add(animal)
  }

  for(let a of newAnimals){
    console.log(a.name)
    if(a.name == name){
      console.log("animal already added.")
    } else {
      newAnimals.add(animal)
    }
  }
})
console.log([...newAnimals])

http://jsbin.com/yavodovawe/1/edit?console

Collectives™ on Stack Overflow

How to select particular items in an array and form a new array using ES6 JS /Lodash

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related