循环通过元素和添加到表的Javascript

时间:2013-03-26 02:59:54

标签: javascript html loops d3.js

我无法找到一个解决方案来帮助我遍历一堆元素并将所选值放入表中。我已经能够提取一些值,但方法不是动态的。

以下是一个例子:

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;

撤回价值观。然而,有更多的团队,统计和分区,所以我需要某种循环来遍历元素并将其放入动态表中。

3 个答案:

答案 0 :(得分:0)

我猜你的问题是关于过滤数组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?

答案 1 :(得分:0)

我会考虑你看一下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的表格:

  1. http://net.tutsplus.com/tutorials/javascript-ajax/getting-cozy-with-underscore-js/
  2. http://scriptble.com/2011/01/28/underscore-js-templates/

答案 2 :(得分:0)

根据您对结果的处理方式,您可以使用以下方案检查对象:

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

    }
  }
}

当然我不知道数据是什么,整体结构是什么或者你想如何呈现它。但是如果你有深度嵌套的数据,那么你所能做的只是挖掘它。您可能能够编写递归函数,但如果数据结构很复杂,也可能很难维护。