如何使用复杂的数据结构在JavaScript和jQuery中填充div或表

我需要帮助理解操作JavaScript数据结构的最佳方法(如果您这样称呼它?)我有Perl背景，正在尝试迭代JavaScript数据结构来动态更新div(或表)。目前，我只是让数据变量(数据)开始。一旦我有排序，然后我将使用jquery的ajax方法来获取数据作为一个json对象在飞行。这是我的理解，我目前生成的数据结构是相同的东西，我会得到，如果它是json??如果不是，那我想那是另一个问题了。

我已经搜索了很多次这样的教程，但他们都很接近，但还没有找到一个满足我的需求…

我想在未来能够重新排序数组和重新填充#data_tablediv所以我的问题的一部分是:这是最好的方式来表示数据?然后我想更新数组的一部分，如公司电话号码或添加一个人，然后从这个更新的数组重新绘制div…

用户的最终结果可能是:

公司:99 Beans，奥克兰，Ph值:360499人:马特,64716472年克里斯蒂安•米歇尔,6473茱蒂,6474年

公司:……*下一个公司等等…

到目前为止，我的代码是这样的(除了我在数据数组中有500多个条目，这里只有2个):

我从另一个问题中找到了一些代码，并试图使它适用于我的结构类型。

<script>
$(document).ready(function() {
var r = new Array();
var data= [
{
  "id":"6477",
  "c":"99 Beans",
  "ci":"Auckland",
  "p":"09 360499",
  "co":[
        {"id":"6471","c":" NZ", "n":"Matt" },
        {"id":"6472","c":" NZ", "n":"Chrstiaan" },
        {"id":"6473","c":" NZ", "n":"Michelle" },
        {"id":"6474","c":" NZ", "n":"Judy " },
        {"id":"6475","c":" NZ", "n":"Kate  " },
        {"id":"6476","c":" NZ", "n":"Unknown Person" }
       ]
},
{"id":"7145", "c":"A1 Ltd", "ci":"Te Puke ","p":"06 870090",
  "co":[{"id":"7145","c":" NZ", "n":"Alan" }
   ]
   },
];
// this alert used to work, when I had the data as an array of arrays so there must be a problem with how I'm referencing it or my data structure is wrong??
alert (data.length + " companies" );//+ data[455].co[0].n);
  var j = -1;
    for (var key=0, size=data.length; key<size; key++) {
     // first div 
      r[++j] ='<div>';
      r[++j] = data[key].id;
      r[++j] = ' - ';
      r[++j] = data[key].c;
      r[++j] = ' - ';
      r[++j] = data[key].p;
      r[++j] = '<br />';
     //inner div 
   var k = -1 ;
    for (var key1=0, size1=data[key].d.length; key1<size1; key1++) {
      r[++j] ='<div>';
      r[++j] = data[key].d.[key1].n + ' - ' + data[key].d.[key1].c + ' - ';
      r[++j] = '</div>';
   }  
      r[++j] = '</div>';
    } 
  $('#data_table').html(r.join('')); 
});
</script>
<div id="data_table"></div>

JSON在Javascript中的表示是Javascript对象。

var json = {
  my_property: 2,
  another_property: 'string!'
}

你可以用json.my_property或json['my_property']获取属性(如果你不知道你到底在获取什么，你可以做var something = 'something-the-user-selected'; json[something])。

使用jQuery，你可以这样写:

var json = {}; // get this from the server using $.AJAX() or $.getJSON()
$("#my_table").append("<tr><td>" + json.my_property + "</tr></td");

或者，如果你有一个数组，说，推文，你应该迭代他们，也许下划线的每一个，jQuery的每一个或普通的旧for (var i = 0; i < json.tweets.length; i++)。

您所引用的数据结构是JSON。

使用jQuery，你可以很容易地使用。each()迭代你的数据结构，并将返回值作为一个定义了属性的对象。

下面是一个Ajax调用的示例，该调用将构建JSON对象并进行迭代:

$.ajax({
            type: "POST",
            url: "MySite/MyResource",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if(data.d.length > 0){
                    $(data.d).each(function(){$('#mytable').append("<tr><td>Company: " + this.c + "</td></tr>");});
                }
            },
            error: function (xhr, status, error) {
                // do something appropriate
            }
        });

如果你想进一步迭代，那么你可以继续调用。each()

如果data是你的JSON值，这将格式化指定的字符串。(你必须JSONify你的字符串，以创建它作为实际的JSON对象)

data.each(function(){ 
  $('#mydiv').append('Company: ' + this.c + ', ' + this.ci + ', Ph: ' + this.p + ' People: ');
  this.co.each(function(){$('#mydiv').append(this.n + ', ' + this.id);});
});

对于"将JSON对象呈现为HTML"，您可能需要查看jQuery.template()，它允许使用模板语法呈现HTML片段。我从未使用过它，所以我不知道它在处理非常大的列表时表现如何……(请注意，它仍处于测试阶段)

这是一个工作的例子(它可能不是最佳的或什么)，但你应该看到一般的想法;)http://jsfiddle.net/tsimbalar/A9uYP/

UPDATE 2为了完整性和可追溯性

原始代码中有一个语法错误，导致alert()无法执行(以及所有后续代码)。见注释:

由于语法错误，您的代码无法工作data[key].d.[key1].n.，这是无效的语法。我想应该是data[key].d[key1].n。使用Firefox的Firebug扩展来检测这些可能被忽视的问题。

修复这个错字后，就可以很容易地使用catalpa在另一个答案中提到的jQuery.each()来遍历对象的内容。然后，您可以构建HTML元素(即$("<div/>"))，并使用append()将它们附加到页面的现有项上。

handlebars js模板远远优于jquery模板，可用于在html

中呈现复杂的json对象。

相关内容

最新更新

热门标签：