Schleife JSON Objekte innerhalb Objekt

Question

Ich weiß, dass diese Frage tausend Mal gefragt wurde, aber ich habe nicht in der Lage, eine Lösung zu finden, die mit der Art und Weise helfen würde, wie ich mein JSON-Objekt strukturiert habe. Vielleicht habe ich die Struktur falsch.

Hier ist meine json:

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

ich Schleife wollen über und bekommen die Werte 'html', 'background-color', 'rgb(0, 0, 0)' dann 'html', 'colour', 'rgb(0, 0, 0)' usw. an eine Funktion zu senden.

Hier ist die Schleife so weit, aber ich war nicht in der Lage, die Werte des Objekts in das Objekt zu bekommen. Ich glaube nicht, dass eine andere Schleife die Antwort ist.

function style_check(styleList) 
{ 

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

} 

**** Meine Lösung

Nach den 3 verschiedenen absolut gültigen Lösungen, die ich mit einer verschachtelten Schleife gegangen bin, wie es Sinn für mich mit meiner begrenzten Kenntnis von Javascript gemacht.

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

Ja, eine verschachtelte Schleife ist die Antwort.

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

prüfen diese fiddle

Answer 2

Hier ist eine Lösung, ES2015 mit, vorbei die analysierten Werte 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

Vielleicht möchten Sie rekursiv verwenden:

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

Das heißt, Sie unendlichen Baum von Kindern passieren können:

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

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

PS: meinen append für Ihre console.log ersetzen, wenn Sie

wollen