javascript - Javascript循环遍历元素并添加到表格

Question

我很难找到一个解决方案来帮助我遍历一堆元素并将所选值放入表中。我已经能够撤回一些值，但该方法不是动态的。

这是一个例子：

var Table = {
    "credit": {
        "link": "site link", 
        "logoUrl": "logo url", 
        "message": "message"
    }, 
    "groups": [
        {
            "labels": [
                {
                    "name": "Western Conference", 
                    "type": "conference"
                }, 
                {
                    "name": "Central Division", 
                    "type": "division"
                }
            ], 
            "standings": [
                {
                    "stats": [
                        {
                            "name": "gp", 
                            "value": 20
                        }, 
                        {
                            "name": "w", 
                            "value": 17
                        }, 
                        {
                            "name": "l", 
                            "value": 0
                        }, 
                        {
                            "name": "gf", 
                            "value": 64
                        }, 
                        {
                            "name": "ga", 
                            "value": 37
                        }, 
                        {
                            "name": "gd", 
                            "value": 27
                        }, 
                        {
                            "name": "pts", 
                            "value": 37
                        }
                    ], 
                    "team": {
                        "id": 12345, 
                        "link": "team link", 
                        "name": "team name", 
                        "shortName": "team"
                    }
                },

这是元素的结构。到目前为止，我已经使用了这个：

document.getElementById("sGamesPlayed").innerHTML=Table.groups[0].standings[0].stats[0].value;

撤回价值。然而，有更多的团队、统计数据和部门，所以我需要某种循环来遍历元素并将它们放入动态表中。

score 0 · Accepted Answer

我会考虑你看看http://underscorejs.org/。

它提供了一堆可以帮助您的实用函数，例如，_.each() 可以帮助您遍历 JSON 属性。

对于您提供的示例对象（在完成最后缺少的括号之后），

_.each(Table.groups[0].standings[0].stats, function(stats){
    console.log(stats['name']+","+stats['value'])
})

给我：

gp,20
w,17
l,0
gf,64
ga,37
gd,27
pts,37

它的工作原理是您提供您想要的对象作为第一个参数，并且您作为第二个参数提供的函数将与第一个参数的每个元素一起调用（假设它是一个列表）。

我还敦促您查看下划线模板，您可以使用它来呈现我放置 console.log 的表格：

score 0 · Accepted Answer

根据您要对结果执行的操作，您可以使用以下方案检查对象：

var groups, standings, stats, value;
groups = Table.groups;

// Do stuff with groups

for (var i=0, iLen=groups.length; i<iLen; i++) {
  standings = groups[i].standings;

  // Do stuff with standings

  for (var j=0, jLen=standings.length; j<jLen; j++) {
    stats = standings[j];

    // Do stuff with stats

    for (var k=0, kLen=stats.length; k<kLen; k++) {
      value = stats[k].value;

      // Do stuff with value

    }
  }
}

当然，我不知道数据的用途，整体结构是什么，或者你想如何呈现它。但如果你有深度嵌套的数据，你所能做的就是深入挖掘它。您可能可以编写递归函数，但如果数据结构复杂，它也可能变得非常难以维护。

score 0 · Accepted Answer

我猜你的问题是关于过滤数组的值standings。为此，您可以使用jQuery grep函数（如果您想使用 jQuery）。

例如你可以写：

var arr = $.grep(Table.groups[0].standings[0].stats, function(d){return d.value>25})

哪个会给

arr = [{"name": "gf","value": 64}, {"name": "ga", "value": 37},{"name": "gd", "value": 27},{"name": "pts", "value": 37}]

如果这不是你的意思，你能用你想要的样本创建一个 jsFiddle 吗？

javascript - Javascript循环遍历元素并添加到表格

3 回答 3

Related

Reference