Iteration Syntax issue ForEach Vue.js

Question

I tried an iteration using Vue.js The result Got an error like this

[Vue warn]: Error in mounted hook: "TypeError: this.frontImages.forEach is not a function"

this.frontImages = {frontA:{name:'frontAName'},frontB:{name:'frontBName'}}; 


this.frontImages.forEach(function(value, index) {

  console.log(value);

}

Answer 1

.forEach() will only work for arrays.

If you need to iterate through the properties of a JSON object, then here is one way of doing that:

this.frontImages = {frontA:{name:'frontAName'},frontB:{name:'frontBName'}}; 

printKeysAndValues(this.frontImages);

function printKeysAndValues(anyObject) {
    Object.keys(anyObject).forEach( key => {

        // in-case properties are nested objects
        let value = JSON.stringify(anyObject[key]);  

        
        // let value = anyObject[key];   // for primitive nested properties


        console.log(`${key} = ${value}`);
    });
}

Answer 2

For array:

this.frontImages = [{frontA:{name:'frontAName'},frontB:{name:'frontBName'}}]; 

this.frontImages.forEach(function(value, index) {

  console.log(value);

})

For only object iteration

this.frontImages = {frontA:{name:'frontAName'},frontB:{name:'frontBName'}}; 

Object.values(this.frontImages).forEach(value => {

  console.log(value);

});