Javascript循环遍历元素并添加到表中

Javascript looping through elements and adding to table

本文关键字：添加 循环 遍历 元素 Javascript      更新时间：2023-09-26

我很难找到一个解决方案，这将有助于我循环通过一堆元素，并把选择的值到一个表。我已经能够撤回一些值，但方法不是动态的。

下面是一个例子:

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;

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

我建议你看看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/

我猜你的问题是关于过滤数组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与你想要的样例吗?

根据您想对结果做什么，您可以使用如下方案来遍历对象:

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

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

相关文章：