Объекты Loop json внутри объекта

Question

Я знаю, что этот вопрос задан тысячу раз, но я не смог найти решение, которое поможет в том, как я структурировал свой объект json. Возможно, у меня неправильная структура.

Вот мой JSON:

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

Я хочу перебрать и получить значения 'html', 'background-color', 'rgb(0, 0, 0)' затем 'html', 'colour', 'rgb(0, 0, 0)' и т.д., чтобы отправить функции.

Вот цикл до сих пор, но я не смог получить значения объекта в объекте. Я не думаю, что другой цикл является ответом.

function style_check(styleList) 
{ 

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

} 

**** Мое решение

После 3-х различных вполне допустимых решений я пошел с вложенным циклом, как это имеет смысл для меня с моим ограниченным знанием 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

Да, вложенная петля является ответом.

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

Проверить это fiddle

Answer 2

Вот решение, используя ES2015, передавая анализируемые значения 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)); 

Answer 3

Может быть, вы хотели бы использовать рекурсивно:

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

Это означает, что вы можете передать бесконечное дерево детей:

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

Другой Plunker: https://plnkr.co/edit/WOxUG1WtHOp26l1qY7ks?p=preview

PS: заменить мой Append для console.log если вы хотите