循环javascript对象来打印数据

Question

我有一个javascript对象，我想遍历和打印数据基于1个常见的类别。

Javascript对象：

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... 
} 

我能过循环数组，并获得粒状的越来越控制台登录所有处于同一区域的状态：

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

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

一旦我尝试循环浏览这些数据并打印一张表格，这些数据就是我遇到问题的地方。我希望能够有一个与长的名字，lawOne，lawTwo，和法律三个值的输入在那里。是什么赋予了？一旦我尝试运行for循环，这就是我遇到了障碍的地方。提前致谢！

Answer 1

请尝试下面的工作代码。

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

你是在正确的轨道上。在继续之前，我想指出你正在使用for..in循环，但更新版本的Javascript也支持for..of循环，所以这是你可能想要考虑的。不同之处在于for..in循环提供了对象的键值，for..of循环提供了值，所以它通过跳过写入以下效果的步骤来缩短代码：

for(var index in array){ 
    var currentObject = array[ index ]; 
} 

解决方案的秘诀在于如何处理DOM，并且有很多方法可以实现此目的。我会告诉你一个，但它不一定是最快或最好的。我建议您使用不同的DOM操作来找出最适合您的操作。

首先，我们知道如何让一个记录，所以循环的JavaScript的方面，你有处理...

接下来，我们需要创建表....我会认为你要四列根据你的描述，但你可以很容易地调整这一点，把国家名称和一条法律放在每一行，这可能是一个更好的设计，允许有不同数量的法律。

HTML代码将是这个样子：

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

那么你的循环就需要通过创建为出现几行加入到这个网站：

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

我们将使用的字符串操作DOM，因为它是一个开始的好地方，因为它与手写的内容最为相似。

我们将把表格分成三部分：标题，正文和页脚。

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

现在，在循环中，我们会根据需要创建每一行，并把它添加到身体：

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

我们的身体后，我们可以通过结合头使我们的表，主体和页脚：

var tableHTML = header + body + footer; 

然后我们找个地方把它注入到我们的文档：

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

这是一个活生生的例子：

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>

注意：关于活码，HTML大于显示框更大。在我的浏览器中，我必须向下滚动snippit HTML才能查看生成的表格。或者将snippit窗口展开为完整的标签页，以便在更大的屏幕中查看它。

上面的代码被简化了，大多数编码器会告诉你不要使用HTMLElement.innerHTML，因为它很慢，但它是一个很好的开始。一旦你有了这个，开始练习document.create（tagName），然后使用更直接的DOM操作。