循环javascript对象以打印数据

我有一个javascript对象，我想遍历它并根据一个公共类别打印数据

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

---

一旦我尝试循环这些数据并打印一个包含这些数据的表，我就会遇到一个问题。我希望能够在其中输入一个带有的longname、lawOne、lawo2和lawo3值。有什么好处？一旦我试着运行一个for循环，这就是我遇到的路障。提前谢谢

尝试下面的工作代码

var$states={
“AL”：{
“longname”：“阿拉巴马州”，
“法律一号”：“阿拉巴马州法律一号”，
“第二条法律”：“阿拉巴马州第二条法律”，
“第三法”：“阿拉巴马州第三法”，
“区域”：“东南”
},
“AK”：{
“longname”：“阿拉斯加”，
“法律一号”：“阿拉斯加法律一号”，
“第二法”：“阿拉斯加第二法”，
“第三法”：“阿拉斯加第三法”，
“地区”：“西北”
},
“AZ”：{
“longname”：“亚利桑那州”，
“法律一号”：“亚利桑那州法律一号”，
“第二条法律”：“亚利桑那州第二条法律”，
“第三法”：“亚利桑那州第三法”，
“地区”：“西南”
}
};
var result={}；
Object.keys（$states）.forEach（函数（键）{
如果（$states[键][“region”]=“southern”）{
结果[键]=$状态[键]；
}
});
控制台日志（结果）您走在正确的轨道上。在我继续之前，我想指出的是，你正在使用for for .. in循环，但是新版本的JavaScript也支持for for循环，所以这是你可能要考虑的。不同之处在于，for..in循环为您提供对象的键，而for..of循环为您提供值，因此它跳过了编写内容的步骤，从而缩短了代码：

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

解决方案的秘密在于如何处理DOM，有很多方法可以做到这一点。我会给你看一个，但它不一定是最快或最好的。我建议您尝试不同的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>

然后我们找到一个地方将其注入到我们的文档中：

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

下面是一个活生生的例子：


var状态={
爸爸：{
longname：“宾夕法尼亚州”，
劳恩：“在费城市区范围内的公寓楼淋浴时唱歌是违法的”，
第二条：“所有驾驶人在经过骑兵时都必须停车。车辆上应覆盖迷彩服，以免惊吓马匹。”，
第三条：“任何拥有超过四名女性居住者的房屋都将被视为妓院，并将违反法律。”
},
新泽西州：{
longname:“新泽西”，
劳恩：“根本没有黑手党这回事”，
第二条：“任何对新泽西州居民的提及都将是贬损和有辱人格的，想想泽西海岸”，
第三条：“新泽西州无路可逃，我们也不是纽约市的郊区”
},
弗吉尼亚州：{
longname：“弗吉尼亚”，
劳恩：“内战重演必须让北方成为胜利者。”，
第二条：“所有道路的终点都是弗吉尼亚州的里士满”，
第三条：“对于这个例子，我已经没有什么愚蠢的想法了。”
}
};
函数buildTableForState（stateNames）{
var stateList=stateNames.split（“，”）；
//删除空格
对于（stateList中的变量i）{stateList[i]=stateList[i].trim（）；}
//初始化表部件
var header=“StateLaw 1Law 2Law 3”；
var footer=“”；
var body=“”；
//身材
for（各州的var指数）{
if（stateList.indexOf（index）！=-1）{
var currentState=状态[索引]；
body+=buildRowForState（当前状态）；
}
}
//组合和注入表
var tableHTML=页眉+正文+页脚；
var documentOut=document.getElementById（“outputDiv”）；
documentOut.innerHTML=tableHTML；
}
函数可提交（值）{
buildTableForState（值）；
}
函数buildRowForState（当前状态）{
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]）；
返回行；
}
函数makeTableCol（stringText）{
返回“+stringText+”；
}
函数makeTableRow（arrayColumns）{
返回“+arrayColumns.join”（“）+”；
}
表格加载器
使用值“PA”、“NJ”和“VA”生成表格。通过用逗号分隔，可以使用多个值



生成表
尝试：


爸爸
新泽西州，弗吉尼亚州
弗吉尼亚州，宾夕法尼亚州，新泽西州

表输出显示在此处
问题出在哪里？您的代码运行正常，但如果段错误，则会出错。转向东北Northwest@BeingSunny问题是，它当前记录了该州所有长名称的列表。我们的目标是在该地区的各州之间循环，并以不同的形式展示它们的法律。如果我添加一个遍历区域州的for循环，那么在我的browser@HoangHieu不完全是。见上文。这是一个非常深入和有用的答案！谢谢就几件事。当我将其加载到JSBin或Codepen中时，button函数会带来一个表，然后它就会消失。我想在沙箱般的环境中玩这个，在这里我可以稍微弄乱DOM。这里的问题是，它不显示基于公共数据点的数据。假设您要在输入字段中输入“NJ”。预期结果将显示一张包含所有东北部州和这些法律的表格
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;