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] );
 }
 }
 }
 }
}

Answer 1

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

Answer 2

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

Answer 3

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));