How are these two Javascript computed objects different?

I have the following computed objects (VUEJS), both results in an array of json object like so:

[{cat: 1}, {car: 3}, {blue: 92}, ....]  

From what I can tell they're both the same even though they're generated from different computed functions.

ITEM 1 is created using the following computed:

    animalOptionsDataObjectONE() {        return this.getObjectWithCount.map(item => {          let objectForAnimals = {};          let i = 1;          for (const [key, value] of Object.entries(item)) {            objectForAnimals.category = key;            objectForAnimals["series_" + i++] = value;          };          return objectForAnimals;        });      }  

ITEM 2 is created using the following computed:

    animalOptionsDataObjectTWO() {          return this.rowDataOfAllGrids.map(item => {          let objectForAnimals = {};          let i = 1;          item.forEach(gridCell => {            if (typeof gridCell === "string") {              objectForAnimals.category = gridCell;            } else {              objectForAnimals["series_" + i++] = gridCell;            }          });          return objectForAnimals;        });      },  

They seem very similar however in a following method not written here, ITEM 1 doesn't render the end feature correctly whereas ITEM 2 does. Why might they be different and how can I make ITEM 1 the same format as ITEM 2?

https://stackoverflow.com/questions/66575423/how-are-these-two-javascript-computed-objects-different March 11, 2021 at 09:54AM