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

Question

我需要帮助来理解操作 JavaScript 数据结构的最佳方式(如果您这样调用它？)。我来自 Perl 背景，正在尝试遍历 JavaScript 数据结构以动态更新 div(或表)。目前我只是让数据成为一个变量(数据)才能开始。排序完成后，我将使用 jquery 的 ajax 方法动态获取数据作为 json 对象。据我了解，我当前生成的数据结构与如果它是 json 会得到的相同？如果不是，那我想那是另一个问题..

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

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

用户的最终结果可能如下所示:

公司:99 Beans，奥克兰，电话: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");

或者，如果你有一个数组，比方说，tweets，你应该迭代它们，也许用 underscore's each , jQuery's each或普通的旧for (var i = 0; i < json.tweets.length; i++) .