在对象中循环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] );
        }
    }

}

****我的解决方案

在经过三种完全有效的解决方案后，我选择了嵌套循环，因为在我有限的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] );
                }
            }
        }
    }
}

- Keith Power

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。

- RJM

Answer 2

也许您想要递归地使用它：

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。

- Diego Polido Santana

Answer 3

这里有一个解决方案，使用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));

- iaretiga