Loop json objects within object

Question

I know this question has been asked a thousand times but I have not been able to find a solution that would help with the way I have structured my json object. It maybe that I have the structure wrong.

Here is my json:

check_styles = {
    'html':{
        'background-color':'rgb(0, 0, 0)',
        'color':'rgb(0, 0, 0)'
    },
    '#my-div':{
        'background-color':'rgb(0, 0, 0)'
    }
};

I want to loop over and get the values 'html', 'background-color', 'rgb(0, 0, 0)' then 'html', 'colour', 'rgb(0, 0, 0)' etc to send to a function.

Here is the loop so far but I have not been able to get the values of the object in the object. I don't think another loop is the answer.

function style_check(styleList)
{

    for (var key in styleList) {
        if (styleList.hasOwnProperty(key) ){
            console.log( "key:"+key+", val:"+styleList[key] );
        }
    }

}

****My Solution

After the 3 different perfectly valid solutions I have gone with a nested loop as it made sense to me with my limited knowledge of javascript.

function style_check(styleList)
{
    for (var selector in styleList) {
        if (styleList.hasOwnProperty(selector) ){
            for (var property in styleList[selector]) {
                if (styleList[selector].hasOwnProperty(property) ){
                    console.log( "selector:"+selector+", property:"+property+", value:"+styleList[selector][property] );
                }
            }
        }
    }
}

RJM · Accepted Answer · 2016-04-10 23:06:20Z

2

Yes, a nested loop is the answer.

function style_check(styleList)
{
    for (var key in styleList) {
        if (styleList.hasOwnProperty(key) ){
            console.log( "key:"+key+", val:"+styleList[key] );
            var obj = styleList[key];
            for (var objkey in obj){
                if (obj.hasOwnProperty(objkey)){
                    console.log("key2:"+objkey+",val:"+obj[objkey]);
                }
            }
        }
    }
}

Check this fiddle

answered Apr 10, 2016 at 23:06

RJM

1,1969 silver badges21 bronze badges

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

Comments

Diego Polido Santana · Accepted Answer · 2016-04-10 23:15:16Z

Maybe you would like to use recursively:

function style_check(styleList, parent) {
  if (parent) {
    $("#console").append("<br>" + parent + "<br/>");
  }
  for (var key in styleList) {
    if (styleList[key] instanceof Object) {
      style_check(styleList[key], key);
    } else {
      $("#console").append("key:" + key + ", val:" + styleList[key] + "<br/>");

    }
  }

}

Plunker: https://plnkr.co/edit/urezkDkN4sVNzBRxn3mI?p=preview

That means you can pass infinite tree of children:

check_styles = {
  'html': {
    'background-color': 'rgb(0, 0, 0)',
    'color': 'rgb(0, 0, 0)',
    'body': {
      'border': "rgb(0, 0, 0)",
      'div': {
        "another": "nested attribute"
      }
    }
  },
  '#my-div': {
    'background-color': 'rgb(0, 0, 0)'
  }
};

Another Plunker: https://plnkr.co/edit/WOxUG1WtHOp26l1qY7ks?p=preview

PS: replace my append for your console.log if you want

iaretiga · Accepted Answer · 2016-04-10 23:07:19Z

Here is a solution, using ES2015, passing the parsed values to console.log:

const check_styles = {
    'html':{
        'background-color':'rgb(0, 0, 0)',
        'color':'rgb(0, 0, 0)'
    },
    '#my-div':{
        'background-color':'rgb(0, 0, 0)'
    }
};

const parse = styles => Object.keys(styles).reduce((result, entry) => 
    result.concat(Object.keys(styles[entry]).map(rule => 
        [entry, rule, styles[entry][rule] ]
    )), []);

parse(check_styles).forEach(parsed => console.log.apply(console, parsed));

Collectives™ on Stack Overflow

Loop json objects within object

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related