循環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操作。