Looping Javascript-Objekt, um Daten zu drucken

Question

Ich habe ein Javascript-Objekt, das ich Daten basierend auf 1 gemeinsamen Kategorie durchqueren und drucken möchte.

Javascript-Objekt:

var $states = { 
"AL" : { 
    "longname": "Alabama", 
    "lawOne": "Alabama Law 1", 
    "lawTwo": "Alabama Law 2", 
    "lawThree": "Alabama Law 3", 
    "region" : "Southeast" 
}, 
"AK" : { 
    "longname": "Alaska", 
    "lawOne": "Alaska Law 1", 
    "lawTwo": "Alaska Law 2", 
    "lawThree": "Alaska Law 3", 
    "region" : "Northwest" 
}, 
"AZ" : { 
    "longname": "Arizona", 
    "lawOne": "Arizona Law 1", 
    "lawTwo": "Arizona Law 2", 
    "lawThree": "Arizona Law 3", 
    "region" : "Southwest" 
}, 
etc... 
} 

Ich bin in der Lage, die Anordnung zu Schleife und erhalten so granular wie die Konsole bekommen alle Staaten zu protokollieren, die sich in der Region sind:

for (var key in $states) { 
     if ($states.hasOwnProperty(key)) { 
      var $getStateRegion = $states[key].region 

      if ($getStateRegion === "Northeast") { 
       console.log ($states[key].longname); 
      } 
     } 
    } 

Einmal Ich versuche, diese zu durchlaufen und eine Tabelle mit diesen Daten auszudrucken, wo ich auf ein Problem stoße. Ich möchte in der Lage sein, die LongName, LawOne, LawTwo und LawThree Werte einzugeben. Was gibt? Sobald ich versuche, eine For-Schleife zu durchlaufen, stoße ich auf eine Straßensperre. Danke im Voraus!

Answer 1

Versuchen Sie den Arbeitscode unten.

var $states = { 
 
"AL" : { 
 
    "longname": "Alabama", 
 
    "lawOne": "Alabama Law 1", 
 
    "lawTwo": "Alabama Law 2", 
 
    "lawThree": "Alabama Law 3", 
 
    "region" : "Southeast" 
 
}, 
 
"AK" : { 
 
    "longname": "Alaska", 
 
    "lawOne": "Alaska Law 1", 
 
    "lawTwo": "Alaska Law 2", 
 
    "lawThree": "Alaska Law 3", 
 
    "region" : "Northwest" 
 
}, 
 
"AZ" : { 
 
    "longname": "Arizona", 
 
    "lawOne": "Arizona Law 1", 
 
    "lawTwo": "Arizona Law 2", 
 
    "lawThree": "Arizona Law 3", 
 
    "region" : "Southwest" 
 
} 
 
}; 
 

 
var result = {}; 
 
Object.keys($states).forEach(function(key) { 
 
    if ($states[key]["region"] === "Southwest") { 
 
    result[key] = $states[key]; 
 
    } 
 
}); 
 
console.log(result);

Answer 2

Sie auf dem richtigen Weg sind. Bevor ich fortfahre, möchte ich darauf hinweisen, dass Sie eine for..in-Schleife verwenden, aber neuere Versionen von Javascript unterstützen auch die for..of-Schleife, also sollten Sie dies in Betracht ziehen. Der Unterschied ist, dass die for..in-Schleife Ihnen die Schlüssel des Objekts gibt, und die for..of-Schleife gibt Ihnen die Werte, also verkürzt es den Code, indem er den Schritt überspringt, in dem Sie etwas schreiben mit dem Effekt:

Das Geheimnis Ihrer Lösung liegt darin, wie Sie mit dem DOM umgehen, und es gibt viele Möglichkeiten, dies zu tun. Ich werde dir eins zeigen, aber es ist nicht unbedingt das schnellste oder das beste. Ich empfehle, mit verschiedenen DOM-Manipulationen herumzuspielen, um diejenige zu finden, die am besten zu dir passt.

Erstens wissen wir, wie eine Aufzeichnung zu erhalten, so dass die Javascript Aspekt Looping, Sie haben das behandelt ...

Als nächstes müssen wir die Tabelle erstellen .... Ich gehe davon aus, dass Sie wollen vier Spalten basierend auf Ihrer Beschreibung, aber Sie könnten dies leicht anpassen, um den Namen des Staates und ein Gesetz auf jeder Zeile, die wahrscheinlich ein besseres Design wäre, eine variable Anzahl von Gesetzen zu setzen.

würde der HTML-Code wie folgt aussehen:

<table> 
    <tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr> 
    <!-- Here is where we would create new html for each state --> 
</table> 

Ihre Schleife, indem Sie mehrere Zeilen zu diesem html hinzufügen dann müssten die als erscheinen:

<tr><td>[State]</td><td>[Law1]</td><td>[Law2]</td><td>[Law3]</td><tr> 

Wir String-Manipulation von verwenden das DOM, weil es ein guter Anfang ist, weil es dem ähnlich ist, was Sie von Hand schreiben würden.

Wir werden die Tabelle in drei Teile aufteilen: den Kopf, den Körper und die Fußzeile.

var header = "<table><tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>"; 

var body = ""; //this is where we add the data 

var footer = "</table>"; 

nun auf der Schleife, werden wir jede Zeile erstellen, wie es für den Körper benötigt, und fügen:

for(var index in stateObj){ 
     ...error checking occurs here... 
     var state = stateObj[ index ]; 
     var stateColumn = "<td>" + state.longname + "</td>"; 
     var law1Col = "<td>" + state.lawOne + "</td>"; 
     var law2Col = "<td>" + state.lawTwo + "</td>"; 
     var law3Col = "<td>" + state.lawThree + "</td>"; 
     var row = "<tr>" + stateColumn + law1Col + law2Col + law3Col + "</tr>"; 
     //now that we have a row, we add it to the body 
     body += row; //same as body = body + row; 
} 

Nachdem wir den Körper, durch die Kombination der Header machen können wir unseren Tisch, Körper und Fußzeile:

var tableHTML = header + body + footer; 

und dann finden wir einen Ort, um es in unserem Dokument zu injizieren:

var outputDiv = document.getElementById("stateTableData"); 
outputDiv.innerHTML = tableHTML; 

Hier ein anschauliches Beispiel ist:

var states = { 
 
    PA: { 
 
    longname:"Pennsylvania", 
 
    lawOne:"It is illegal to sing in the shower in apartment buildings within the city limits of Philadelphia", 
 
    lawTwo:"All motorists are required to stop the vehicle for passing horsemen. The vehicle shall be covered with camoflage so as not to scare the horses.", 
 
    lawThree:"Any house having more than four women occupants shall be considered a brothel and shall be in violation of the law." 
 
}, 
 
    NJ: { 
 
     longname:"New Jersey", 
 
     lawOne:"There is no such thing as the Mafia", 
 
     lawTwo:"Any reference to the denizens of New Jersey shall be derogatory and degrading, think Jersey Shore", 
 
     lawThree:"There is no escape from New Jersey and we are not a suburb of NYC" 
 
     }, 
 
    VA: { 
 
     longname:"Virginia", 
 
     lawOne: "Civil War re-enactments must have the North as the victor.", 
 
     lawTwo: "All roads shall end in Richmond, VA", 
 
     lawThree: "I have run out of silly ideas for this example." 
 
    } 
 
}; 
 
function buildTableForState(stateNames){ 
 
    var stateList = stateNames.split(","); 
 
    
 
    //remove spaces 
 
    for(var i in stateList){ stateList[i] = stateList[i].trim(); } 
 
    
 
    //initialize table parts 
 
    var header = "<table><tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>"; 
 
    var footer = "</table>"; 
 
    var body = ""; 
 
    
 
    //build body 
 
    for(var index in states){ 
 
     if(stateList.indexOf(index) !== -1){ 
 
      var currentState = states[index]; 
 
      body += buildRowForState(currentState); 
 
     } 
 
    } 
 
    
 
    //compose and inject table 
 
    var tableHTML = header + body + footer; 
 
    var documentOut = document.getElementById("outputDiv"); 
 
    documentOut.innerHTML = tableHTML; 
 
} 
 

 
function submitTable(value){ 
 
    buildTableForState(value); 
 
} 
 

 
function buildRowForState(currentState){ 
 
    var state = makeTableCol(currentState.longname); 
 
    var law1 = makeTableCol(currentState.lawOne); 
 
    var law2 = makeTableCol(currentState.lawTwo); 
 
    var law3 = makeTableCol(currentState.lawThree); 
 
    var row = makeTableRow([state, law1, law2, law3]); 
 
    return row; 
 
} 
 

 
function makeTableCol(stringText){ 
 
    return "<td>" + stringText + "</td>"; 
 
} 
 

 
function makeTableRow(arrayColumns){ 
 
    return "<tr>" + arrayColumns.join("") + "</tr>"; 
 
}

<h1>Table Loader</h1> 
 
<form> 
 
    <p>Use the values "PA", "NJ", and "VA" to generate a table. You can use more than one value by separating them with a comma.</p> 
 
    <input type="text" id="stateNames" name="stateNames" /><br/> 
 
    <button onclick="submitTable(stateNames.value);">Build Table</button> 
 
    <p>Try: 
 
    </p> 
 
    <ul> 
 
    <li>PA</li> 
 
    <li>NJ,VA</li> 
 
    <li>VA,PA,NJ</li> 
 
    </ul> 
 
</form> 
 

 
<h1>Table Output appears here</h1> 
 
<div id="outputDiv"></div>

HINWEIS: der Live-Code betrifft, ist die HTML größer als die Display-Box. In meinem Browser muss ich nach dem Snippit-HTML scrollen, um die generierte Tabelle anzuzeigen. Entweder das oder erweitern Sie das Snippit-Fenster zu einem vollständigen Tab, um es auf einem größeren Bildschirm anzuzeigen.

Der obige Code ist vereinfacht, und die meisten Programmierer würden Ihnen sagen, HTMLElement.innerHTML nicht zu verwenden, weil es langsam ist, aber es ist ein guter Anfang. Sobald Sie dies nicht mehr beherrschen, beginnen Sie mit document.create (tagName) zu üben und verwenden Sie dann mehr direkte DOM-Manipulationen.