CODEWITHSUNDEEP
javascriptarraysecmascript-6
Rico Letterman
Rico Letterman

Reputation: 651

Map two Arrays and remove duplicated, keeping all elements

I have two arrays which I want to manipulate. It will be used as a list.

Supposing its a system to show user which fruits are their favorite in a list. The system will display several fruits and she could mark the ones she likes, those will be attached to their position (index).

The other (null/untattached) positions will be populated will all other fruits available.

Below the code:

let favoriteFruits = [null, null, 'banana', null, 'pineapple', null, null, null, null, null]
let allFruits = ['grape', 'banana', 'orange', 'pineapple', 'blueberry', 'strawberry']
let fruitsDisplayed = new Array(10)

allFruits = allFruits.filter(fruit => !favoriteFruits.includes(fruit))

fruitsDisplayed = favoriteFruits.slice(0)
fruitsDisplayed = fruitsDisplayed.map((fruit, i) => fruit == null ? allFruits[i] : fruit)

console.log(fruitsDisplayed)

Since the favoriteFruits are collected from allFruits (user can only choose her favorite if it's available on our all list), what happens when user favorite a given fruit (and item's index is stored on list), is that when I iterate the allFruitsarray to populate null spaces, it causes duplicated, which is what I want to avoid.

The expected result would be fruitsDisplayed be favoriteFruits ostored n their positions, added allFruits on all null spaces, **except the ones already favorited **. I can't think a way of doing it now.

Please notice that I have no control over favoriteFruits, which their fruits/indexes are set by the user.

What I'm trying to accomplish (null spaces are intended to be there):

current result:

(where is my blueberry??)

[
  "grape",
  "orange",
  "banana",
  "strawberry",
  "pineapple",
  undefined,
  undefined,
  undefined,
  undefined,
  undefined
]

expected result

[
  "grape",
  "orange",
  "banana", // already favorited
  "blueberry",
  "pineapple", // already favorited
  "strawberry",
  undefined,
  undefined,
  undefined,
  undefined
]

I'm not a JavaScript expert, so if the answer questions any code practice I'm doing I'll happily edit to fit my needs.

Upvotes: 2

Views: 73

Answers (2)

Nina Scholz
Nina Scholz

Reputation: 386680

You could use Set and delete the used items and build then a new array with favoriteFruits.

var favoriteFruits = [null, null, 'banana', null, 'pineapple', null, null, null, null, null],
    allFruits = ['grape', 'banana', 'orange', 'pineapple', 'blueberry', 'strawberry'],
    fruitsDisplayed,
    fruitSet = new Set(allFruits),
    restFruit;
		
favoriteFruits.forEach(a => fruitSet.delete(a));
restFruits = [...fruitSet],
fruitsDisplayed = favoriteFruits.map(a => a || restFruits.shift());

console.log(fruitsDisplayed);

Upvotes: 2

Pavan
Pavan

Reputation: 1015

First form a third array which has items of both 1st and 2nd array.

      var arr3 = [];
     arr1.forEach(function(item){
        arr3.push(item);
      });
     arr2.forEach(function(item){
       arr3.push(item); 
     }

then use this function.

    var deduped = arr3.filter(function (el, i, arr) {
     return arr.indexOf(el) === i;
    });

   console.log(deduped);

Source: http://www.jstips.co/en/deduplicate-an-array/

Upvotes: 0

Related Questions