Question

我需要帮助了解操作JavaScript数据结构的最佳方法（如果你称之为？）。我来自Perl背景，我正在尝试迭代JavaScript数据结构来动态更新div（或表）。目前我只是将数据变成一个变量（数据）。一旦我对它进行了排序，那么我将使用jquery的ajax方法将数据作为json对象动态获取。我的理解是，我正在生成的数据结构与json是一样的。如果不是那么我猜那是另一个问题..

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

我希望将来能够重新排序数组并重新填充#data_table div，所以我的问题的一部分是：这甚至是表示数据的最佳方式吗？然后我想更新数组的一部分，如公司电话号码或添加一个人，然后从这个更新的数组重绘div ...

用户的最终结果可能如下：

公司：99 Beans，Auckland，电话：360499 人：马特，6471 克里斯蒂安，6472 米歇尔，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>

Answer 1

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

或者，如果你有一组推文，你应该迭代它们，可能是underscore's each，jQuery's each或普通的for (var i = 0; i < json.tweets.length; i++)。

Answer 2

您指的数据结构是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);});
});

Answer 3

对于“将JSON对象呈现为HTML”，您可能需要查看jQuery.template()，它允许使用模板语法呈现HTML片段。我从来没有使用过它，所以我不知道它可以用非常大的列表表现得多好......（还要注意它仍处于测试阶段）

<强>更新

这是一个工作示例（它可能不是最佳或任何东西），但你应该看到一般的想法;） http://jsfiddle.net/tsimbalar/A9uYP/

为了完整性和可追溯性而更新2

原始代码中存在语法错误，导致alert()无法执行（以及所有后续代码）。见评论：

由于语法错误，您的代码无效 data[key].d.[key1].n.，这是无效的语法。（我认为它应该是data[key].d[key1].n。使用Firefox的Firebug扩展来检测这种不会引起注意的问题。

修复此错字后，很容易使用{cat}在另一个答案中提到的jQuery.each()迭代对象的内容。然后，您可以构建HTML元素（即$("<div/>")），并使用append()将它们附加到页面的现有项目中。（参见关于该部分的小提琴）

Answer 4

handlebars js模板比jquery模板好得多，可用于在html中渲染复杂的json对象

如何使用复杂的数据结构来填充JavaScript中的div或表格。 jQuery的

4 个答案: