how to split an object to multiple objects inside an array efficiently

Question

I have a sample array bunch as

let bunch = [{fruit: "apple" , quantity: 1},{fruit: "banana" , quantity: 3}]

I am trying to split the object to its quantity times --> if fruit is banana and quantity > 1 as:

//newBunch --> [{fruit: "apple" , quantity: 1},{fruit: "banana" , quantity: 1},{fruit: "banana" , quantity: 1},{fruit: "banana" , quantity: 1}]

I have tried using reduce as :

let bunch = [{fruit: "apple" , quantity: 1},{fruit: "banana" , quantity: 3}]
let res = bunch.reduce((acc,curr)=>{
        if(curr.quantity > 1 && curr.fruit==='banana'){  
      var arr = []
        for(let i=0; i < curr.quantity ; i++){
      var fr = {}
        fr.fruit = 'banana';
      fr.quantity = 1;   
      arr.push(fr)
      }
      acc.push(...arr)
    }
    else{
     acc.push(curr)
    }  
    return acc
},[])

console.log(res)

I get the expected o/p using above snippet , but there would be an efficient way to do this (less code probably ) or would you just suggest to go with the current solution? please guide me along this. TIA

Yousaf · Accepted Answer · 2020-09-21 10:36:32Z

2

You could use .forEach() method to iterate over the array and then create new objects depending on the value of quantity property. You can push these newly created objects in another array that will hold all the objects.

let bunch = [
  { fruit: 'apple', quantity: 1 },
  { fruit: 'banana', quantity: 3 },
];

const result = [];
bunch.forEach(obj => {
  for (let i = 1; i <= obj.quantity; i++) {
    result.push({ ...obj, quantity: 1 });
  }
});

console.log(result);

answered Sep 21, 2020 at 10:36

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KcH Over a year ago

and adding a if to check fruit === 'banana'

Yousaf Over a year ago

I don't understand what you mean. Could you elaborate what you are trying to say?

KcH Over a year ago

actually I am trying to do this for fruit banana , but the solution will split for all fruits of quantity > 1 , I understood but for others ref ..

stranded · Accepted Answer · 2020-09-21 10:40:25Z

2

You can use flatMap and Array.prototype.fill

let bunch = [{fruit: "apple" , quantity: 1},{fruit: "banana" , quantity: 3}]
let result = bunch.flatMap((fruit) => {
  return Array(fruit.quantity).fill({ ...fruit, quantity: 1})
})

answered Sep 21, 2020 at 10:40

stranded

3222 silver badges9 bronze badges

5 Comments

Yousaf Over a year ago

Don't use .fill() method to insert an object in the array because in case of banana, there will be a single object that will be inserted at three indexes of the array. For details, see: MDN -Array.prototype.fill()

KcH Over a year ago

@Yousaf how does that affect , could you please explain

Yousaf Over a year ago

The object with banana will be inserted at three indexes, i.e. 1, 2, and 3 but the underlying object will be only one. So if you change the object at second index, these changes will be reflected in the objects at index 2 and 3 as well because in the memory there is only one object. You can test the problem by changing the quantity of the object at second index and then inspect the objects at index 2 and 3

stranded Over a year ago

@Yousaf, good point, depends on how someone is planning to use the resulting array. If the repeated elements need to be changed, then this approach may not work, because the repeated elements are a reference to a single object.

KcH Over a year ago

@Yousaf makes sense , thanks again :) .... in my case the objects are static and may be I can use this approach then

Yevhen Horbunkov · Accepted Answer · 2020-09-21 11:27:18Z

1

You may use Array.prototype.reduce() to traverse your source array.

Upon each iteration you simply prepare sparse array of size quantity, using Array() constructor
Use Array.prototype.fill() and Array.prototype.map() combination to fill above array with objects having property fruit, equal to the source object and property quantity set to 1 (this approach is cleaner than using simply .fill() for non-primitive data type items, like objects)
Use Array.prototype.push() together with spread syntax to push all the items of resulting array into .reduce() accumulator

const src = [{fruit: "apple" , quantity: 1},{fruit: "banana" , quantity: 3}],

      result = src.reduce((acc, {fruit, quantity}) => {
        acc.push(
          ...Array(quantity)
            .fill()
            .map(_ => ({
              fruit, 
              quantity: 1
            }))
        )
        return acc
     }, [])
        
console.log(result)

.as-console-wrapper{min-height:100%;}

edited Sep 21, 2020 at 11:27

answered Sep 21, 2020 at 10:40

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

3 Comments

KcH Over a year ago

reduce again ahh :) ... thanks @Yevgen ... One Q , _ is that buffer which holds result ?

KcH Over a year ago

yes , thanks for the compatibilty note .... But I feel little harder to understand this answer , would be great with little more explanation :)

KcH Over a year ago

absolutely performance is more imp .... thanks for explanation too :) ... the chosen answer consequences considered later and changed to other and it is much more readable and simple ...

Lioness100 · Accepted Answer · 2020-09-27 23:29:40Z

1

I suggest using Array.prototype.flatMap() and Array.from()

let bunch = [
  { fruit: 'apple', quantity: 2 },
  { fruit: 'banana' , quantity: 3 }, 
  { fruit: 'starfruit', quantity: 1 },
];

const splitBunches = bunch.flatMap((fruit) => (
  Array.from({ length: fruit.quantity }, () => ({ ...fruit, quantity: 1 }))
))

console.log(splitBunches)

answered Sep 27, 2020 at 23:29

Lioness100

8,4286 gold badges21 silver badges50 bronze badges

Collectives™ on Stack Overflow

how to split an object to multiple objects inside an array efficiently

4 Answers 4

3 Comments

5 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest