How to use for loop for nested arrays instead of using map

Question

How to create a new list with all user information, but add "!" to the end of each items they own.I know to solve this with map. But i'm finding it hard as a beginner to do this with a for loop. Here is the code. I would really appreciate the help.

const array = [
  {
    username: "john",
    team: "red",
    score: 5,
    items: ["ball", "book", "pen"]
  },
  {
    username: "becky",
    team: "blue",
    score: 10,
    items: ["tape", "backpack", "pen"]
  },
  {
    username: "susy",
    team: "red",
    score: 55,
    items: ["ball", "eraser", "pen"]
  },
  {
    username: "tyson",
    team: "green",
    score: 1,
    items: ["book", "pen"]
  },

];

I found it a bit hard to follow what you mean by 'add "!" to the end of each item they own'. Maybe you could add a small example of the desired state of your object to the question, to better point out what you are trying to achieve — eimerreis
– eimerreis, Commented Aug 3, 2021 at 9:52

Unmitigated · Accepted Answer · 2021-08-02 20:09:38Z

1

You can loop over the elements using for ... of, then loop over the items for the object with an index-based for loop to update it.

const array = [ { username: "john", team: "red", score: 5, items: ["ball", "book", "pen"] }, { username: "becky", team: "blue", score: 10, items: ["tape", "backpack", "pen"] }, { username: "susy", team: "red", score: 55, items: ["ball", "eraser", "pen"] }, { username: "tyson", team: "green", score: 1, items: ["book", "pen"] },];
for(const {items} of array){
  for(let i = 0; i < items.length; i++) items[i] += '!';
}
console.log(array);

answered Aug 2, 2021 at 20:09

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

Comments

pilchard · Accepted Answer · 2021-08-02 21:36:15Z

If you're trying to return a new array and not mutate the original you need to clone each nested object (in this case each object, and then each 'items' array).

Here using nested for...of loops in conjunction with Array#entries() to access the index and value. Each object and its nested items array is cloned using spread syntax before updating the item values and then pushing the objects to the copy array.

const array = [{ username: "john", team: "red", score: 5, items: ["ball", "book", "pen"] }, { username: "becky", team: "blue", score: 10, items: ["tape", "backpack", "pen"] }, { username: "susy", team: "red", score: 55, items: ["ball", "eraser", "pen"] }, { username: "tyson", team: "green", score: 1, items: ["book", "pen"] },];

const copy = [];

for (const object of array) {
  const objectCopy = { ...object, items: [...object.items] }
  for (const [i, string] of objectCopy.items.entries()) {
    objectCopy.items[i] = string + '!'
  }
  copy.push(objectCopy)
}

console.log(copy);

If you simply want to mutate the original array you can use nested for loops, here using destructuring to isolate the items array in the outer loop before iterating it in the inner loop.

const array = [{ username: "john", team: "red", score: 5, items: ["ball", "book", "pen"] }, { username: "becky", team: "blue", score: 10, items: ["tape", "backpack", "pen"] }, { username: "susy", team: "red", score: 55, items: ["ball", "eraser", "pen"] }, { username: "tyson", team: "green", score: 1, items: ["book", "pen"] },];

for (let i = 0; i < array.length; i++) {
  const { items } = array[i];
  for (let j = 0; j < items.length; j++) {
    items[j] += '!';
  }
}

console.log(array);

Collectives™ on Stack Overflow

How to use for loop for nested arrays instead of using map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related