how to loop through values of a nested object in javascript in es6

Question

I am trying to use a condition if all values of an object is not equal to empty or null. I am trying to retrieve the values in es6. How can I achieve this?

This is the object

let obj = painterHomeWizardData: {
        hero: {
          image_en: 'image1',
          image_ar: 'image2',
          heading_en: 'heading1',
          heading_ar: 'heading2',
          description_en: 'description1',
          description_ar: 'description2'
        },
        become_painter: {
          image_en: 'image1',
          image_ar: 'image2',
          title_en: 'title1',
          title_ar: 'title2',
          description_en: 'description1',
          description_ar: 'description2',
          sections: [
            {
              image_en: 'image1',
              image_ar: 'image2',
              title_en: 'title1',
              title_ar: 'title2',
              description_en: 'description1',
              description_ar: 'description2'
            }
          ]
        },
        testimonials: [
          {
            name_en: 'name5',
            name_ar: 'name2',
            testimonial_en: 'testimonial1',
            testimonial_ar: 'testimonial2'
          }
        ],
        painter_requirements: {
          title_en: 'title1',
          title_ar: 'title2',
          sub_title_en: 'Subtitle1',
          sub_title_ar: 'SubTitle2',
          sections: [
            {
              image_en: 'image1',
              image_ar: 'image2',
              attribute_en: 'Attribute1',
              attribute_ar: 'Attribute2',
              title_en: 'title1',
              title_ar: 'title2',
              description_en: 'description1',
              description_ar: 'description2'
            }
          ]
        },
        get_started: {
          title_en: 'title1',
          title_ar: 'title2',
          description_en: 'description1',
          description_ar: 'description2',
          sections: [
            {
              attribute_id: 'attribute1',
              title_en: 'title1',
              title_ar: 'title2',
              description_en: 'description1',
              description_ar: 'description2'
            }
          ]
        },
        name: 'NAME'
      }

I tried this method Used Object.keys and map Please explain how to achieve this

const z = Object.keys(this.painterHomeWizardData).map(item => {
      return this.painterHomeWizardData[item]
    })
    console.log('z', z)

    const y = z.map(a => {
      return Object.keys(a).map((item, i) => [item])
    })

    console.log('y', y)

How can i achieve this? how to loop through values of a nested object in javascript in es6 Thank you

What exactly do you want to loop through? The properties of `hero`, then `become_painter`, then `testimonials` etc.? Do you want nesting functionality (recursion), or do you just want to loop through the values of each nested object/array as-is? — Jack Bashford, Aug 21 '19 at 10:42
yes, the properties of hero, become_painter, testimonials, ... — Kiran Villa, Aug 21 '19 at 11:27
Possible duplicate of [Iterate through Nested JavaScript Objects](https://stackoverflow.com/questions/8085004/iterate-through-nested-javascript-objects) — Jared Smith, Aug 21 '19 at 12:06

score 0 · Accepted Answer · answered Aug 21 '19 at 12:03

 let obj ={ painterHomeWizardData: {
        hero: {
          image_en: 'image1',
          image_ar: 'image2',
          heading_en: 'heading1',
          heading_ar: 'heading2',
          description_en: 'description1',
          description_ar: 'description2'
        },
        become_painter: {
          image_en: 'image1',
          image_ar: 'image2',
          title_en: 'title1',
          title_ar: 'title2',
          description_en: 'description1',
          description_ar: 'description2',
          sections: [
            {
              image_en: 'image1',
              image_ar: 'image2',
              title_en: 'title1',
              title_ar: 'title2',
              description_en: 'description1',
              description_ar: 'description2'
            }
          ]
        },
        testimonials: [
          {
            name_en: 'name5',
            name_ar: 'name2',
            testimonial_en: 'testimonial1',
            testimonial_ar: 'testimonial2'
          }
        ],
        painter_requirements: {
          title_en: 'title1',
          title_ar: 'title2',
          sub_title_en: 'Subtitle1',
          sub_title_ar: 'SubTitle2',
          sections: [
            {
              image_en: 'image1',
              image_ar: 'image2',
              attribute_en: 'Attribute1',
              attribute_ar: 'Attribute2',
              title_en: 'title1',
              title_ar: 'title2',
              description_en: 'description1',
              description_ar: 'description2'
            }
          ]
        },
        get_started: {
          title_en: 'title1',
          title_ar: 'title2',
          description_en: 'description1',
          description_ar: 'description2',
          sections: [
            {
              attribute_id: 'attribute1',
              title_en: 'title1',
              title_ar: 'title2',
              description_en: 'description1',
              description_ar: 'description2'
            }
          ]
        },
        name: 'NAME'
      }
    }   
var tempKeys = [];
    var emptyField = false;
    for (let [key, value] of Object.entries(obj)) {
      console.log(`${key}: ${value}`);
      tempKeys.push(key);
      //console.log(typeof value);
        if(typeof value == 'object'){
            for (let [key, value1] of Object.entries(value)) {
        //console.log(typeof value1);
          tempKeys.push(key);
        console.log(`${key}: ${value1}`);
        }

    }  
      else{
            console.log(`${key}: ${value}`);
        }  
    }
    console.log("temp keys ===>" , tempKeys);
    tempKeys.forEach(function(vals , index){
        //console.log(vals);
        //console.log(obj[tempKeys[0]][vals]);
      if(index == 0){
        return false;
        }
      else{
        for (let [key, value1] of Object.entries(obj[tempKeys[0]][vals])) {
            if(typeof value1 == 'object'){
                if(obj[tempKeys[0]][vals][0] != undefined){
                    for (let [key, value1] of Object.entries(obj[tempKeys[0]][vals][0])) {
                        console.log(`${key}: ${value1}`);
                        if(value1.length < 1){
                            emptyField = true;
                        }
                    }
                    //console.log("typeof value1 == 'object' ====>" , obj[tempKeys[0]][vals][0]);
                }
            }else{
                if(value1.length < 1){
                    emptyField = true;
                }
                //console.log(`${key}: ${value1}`);
            }

        }

      }



    });
    if(emptyField == false){
        console.log("no empty field occur");
    }
    else{
        console.log("empty field occur");
    }

Through this you can check for non empty field
The object you provide is also not value , refer the object provided in my answer

score 0 · Answer 2 · answered Aug 21 '19 at 12:06

0

Use Object.values to get an array of the values, then loop through those with Object.values:

Object.values(this.painterHomeWizard).map(Object.values).forEach(value => {...});

answered Aug 21 '19 at 12:06

Jack Bashford

43,180
11
50
79

how to loop through values of a nested object in javascript in es6

2 Answers2