Sujay Kundu

Sujay Kundu

Full Stack Web Developer based on Bangalore, India

Manipulating Arrays using Javascript

Posted on May 29, 2020

Learn how to manipulate Arrays using Javascript

Seperating Unique Elements from a Array

Suppose you have a array of numbers, and we want to create a new array with only the unique elemets present to it !

let numbersArray = [1,1,4,5,4,4,2,1,5];

// we can solve this using 2 ways

//1. using for each includes
let finalArray = [];
numbersArray.forEach(k => {
    if(!finalArray.includes(k)){
      finalArray.push(k)
    }
});

// 2. using sets
let finalArray = [...new Set(numbersArray)];
console.log('unique Number Array', finalArray);


// O/P

final array [1,4,5,2]

Thats it, we got a unique array of elements.

Seperating Unique Array Objects from a Array

Suppose you have a array object with duplicated objects , which looks something like this:

const fruits = [
		   {
                     "id": "123",
		     "name": "Apple"
                    },
	           {
                     "id": "1234",
		     "name": "Mango"
                   },
	           {
                     "id": "123",
		     "name": "Apple"
                    }
		 ];

As you can see Apple have a duplicate of itself in the Array, and the problem that we want to solve here is to remove the duplicated object. That is only 1 object of Apple should be there in the array. we want to remove the other one.

So how to solve this problem, Lets break this down.

Lets get the ids of the objects,

// we can do this using two methods :

// using Array.from()
let fruitIDs = Array.from(fruits, fruit => fruit.id);

// using Map
let fruitIds = fruits.map(fruit => fruit.id);

// O/P :
fruit Ids[
  "123",
  "1234",
  "123"
]

Now lets create a unique array of Ids,

// get the unique fruit ids,
// if we want to create array from a set, we need to use Array.from(set)
let uniqueArrayIDs = Array.from(new Set(fruitIds));
console.log('uniqueArrayIds', uniqueArrayIds);

// O/P
uniqueArrayIds[
  "123",
  "1234"
]

Now lets get the fruit details from the old array using the unique ids

// we can do this using three methods:

// using Array.from()

let uniqueFruits = Array.from(uniqueArrayIDs, id => {
  return fruits.find(item => item.id === id)
})

// using Map

let uniqueFruits = uniqueArrayIDs.map(id => {
  return fruits.find(item => item.id === id);
})

// using Filters
let uniqueFruits = [];
uniqueArrayIDs.forEach(id => {
   let filteredFruitDetails = fruits.filter(fruit => fruit.id === id);
   uniqueFruits.push(filteredFruitDetails[0]);
});

console.log('uniqueFruits', uniqueFruits);

// O/P

uniqueFruits [
  {
    "id": "123",
    "name": "Apple"
  },
  {
    "id": "1234",
    "name": "Mango"
  }
]

Great we got the unique Object that we wanted. But wait, don’t you think we can make this process a bit shorter. Lets combine all the steps together :

// Final combined format

let uniqueFruitIds =
 Array.from(new Set(Array.from(fruits, fruit => fruit.id)), id => {
  return fruits.find(item => item.id === id);
});

console.log('uniqueFruitIds', uniqueFruitIds);

//O/P

uniqueFruitIds [
  {
    "id": "123",
    "name": "Apple"
  },
  {
    "id": "1234",
    "name": "Mango"
  }
]

Nice ! That’s a 1 liner for all the hard work we did earlier :P