Iteration over an Array of Arrays in vuejs

Question

is there a simplest way of iterating over an array of arrays in this sample of JSON


  "game": {

  "sunk_ships": [
    [
      "PatrolBoat",
      "Destroyer"
    ]
  ]
}

in my code this is what i wrote having in mind former questions answered

for (let i = 0; i < this.getGamePlayerId.sunk_ships.length; i++) {
          let childArray=parent[i];

          for (let j = 0; j < parent[i].length; j++) {
            var innerValue=parent[i][j]
            console.log(parent[i][j]);

              document
                .getElementById(innerValue)
                .classList.add("shipDestroyed");
          }
        }

thanks

Does this answer your question? [looping through arrays of arrays](https://stackoverflow.com/questions/7106410/looping-through-arrays-of-arrays) — 404, Feb 05 '20 at 14:48
If you are using v-for in vue then you might also look at the conditional binding of classes. This could allow you to change colors or icons based on your destroyed ship values. https://vuejs.org/v2/guide/class-and-style.html — Dean, Feb 05 '20 at 14:55

Ben Aston · Accepted Answer · 2020-02-05T15:23:35.427

JSON is textual data exchange format.

What you are trying to write is a nested loop, which there are lots of ways to write.

const json = `{
    "game": {

        "sunk_ships": [["PatrolBoat", "Destroyer"], ["Frigate", "Carrier"]]
    }
}`;

const o = JSON.parse(json)

o.game.sunk_ships.forEach((ships) => 
                          ships.forEach((ship) => 
                              console.log(ship)))

Iteration over an Array of Arrays in vuejs

1 Answers1