What is the best way to update an array by inserting the new element in specific index when certain condition is met while looping.

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 6, count: 9}
  {item: 4, count: 5}]

I want to loop the exampleArray while keep track of count and insert new element right after when the count is greater than or equal to 10 and then reset the count to 0 for next loop

so the result I want is

const resultArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 'new item 1 as count is over 10', count: 0},
  {item: 3, count: 10},
  {item: 'new item 2 as count is equal to 10', count: 0}, 
  {item: 6, count: 9},
  {item: 4, count: 5}, 
  {item: 'new item 3 as count is > 10, previous two counts (9   5 )', count: 0 }]

I tried this

let count = 0
exampleArray.forEach((item, index) => {
 count  = item.count

 if(count >= 10) {
  exampleArray.splice(index   1, 0, {item: 'item to be added', count: 0}
  count = 0
 }
})

CodePudding user response：

Both of these create a new array - if you want to overwrite, use let and asssign back to the original

TJ Suggested map and flat - that is a flatMap

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 4, count: 5}];
  
let count = 0;  
const resultArray = exampleArray.flatMap(item => {
  count  = item.count; 
  if (count >= 10) {
    count = 0
    return [item, {item:"new", count:0}]
  }  
  return item;
});

console.log(resultArray);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Reduce

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 4, count: 5}];
  
let count = 0;
const resultArray = exampleArray.reduce((acc,cur) => {
  count  = cur.count; 
  acc.push(cur);
  if (count >= 10) {
    count = 0
    acc.push({item:"new", count:0})
  }  
  return acc;
},[]);

console.log(resultArray);

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I'd go for a simple for or for...of loop. If you're happy to create a new array (if not — I see you aren't in your question — see below):

const result = [];
for (const item of exampleArray) {
    count  = item.count;
    result.push(item);
    if (count >= 10) {
        result.push({item: 'item to be added', count: 0});
    }
}

or (originally I used map...flat(), because I forgot again about flatMap; mplungjan reminded me):

let count = 0;
const result = exampleArray.flatMap(item => {
    count  = item.count;
    if (count >= 10) {
        return [item, {item: 'item to be added', count: 0}];
    }
    return item;
});

Live Example:

Show code snippet

const exampleArray = [
    {item: 1, count: 5},
    {item: 2, count: 20},
    {item: 3, count: 10},
    {item: 4, count: 5}
];
let count = 0;
const result = [];
for (const item of exampleArray) {
    count  = item.count;
    result.push(item);
    if (count >= 10) {
        result.push({item: 'item to be added', count: 0});
    }
}
console.log(result);
count = 0;
const result2 = exampleArray.map(item => {
    count  = item.count;
    if (count >= 10) {
        return [item, {item: 'item to be added', count: 0}];
    }
    return item;
}).flat();
console.log(result2);

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you really want to modify the existing array instead, the for loop lets you control the index variable:

for (let index = 0; index < exampleArray.length;   index) {
    const item = exampleArray[index];
    count  = item.count;
    if (count >= 10) {
        exampleArray.splice(index   1, 0, {item: 'item to be added', count: 0});
        count = 0;
          index; // Skip the item we just added
    }
}

Live Example:

Show code snippet

const exampleArray = [
    {item: 1, count: 5},
    {item: 2, count: 20},
    {item: 3, count: 10},
    {item: 4, count: 5}
];
let count = 0;
for (let index = 0; index < exampleArray.length;   index) {
    const item = exampleArray[index];
    count  = item.count;
    if (count >= 10) {
        exampleArray.splice(index   1, 0, {item: 'item to be added', count: 0});
        count = 0;
          index; // Skip the item we just added
    }
}
console.log(exampleArray);

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>