如何使用復雜的數據結構在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']來獲取屬性（如果您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");

或者，如果您有一系列tweet，則應該對其進行迭代，可能使用下划線的每個 ， jQuery的每個或純舊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值，這將格式化您指定的字符串。 （您必須對字符串進行JSON化，才能將其創建為實際的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/

UPDATE 2出於完整性和可追溯性的考慮

原始代碼中存在語法錯誤，導致無法執行alert() （以及所有后續代碼）。 見評論：

由於data[key].d.[key1].n.中的語法錯誤，您的代碼無法正常工作data[key].d.[key1].n. ，這是無效的語法。 （我想這應該是data[key].d[key1].n 。使用Firefox的Firebug擴展來檢測此類問題，否則這些問題將不會引起注意。

修正此拼寫錯誤后，很容易使用cat.pa在另一個答案中提到的jQuery.each()遍歷對象的內容。 然后，您可以構建HTML元素（即$("<div/>") ），然后使用append()將它們附加到頁面的現有項目中。 （請參閱有關該部分的小提琴）

Answer 4

handlebars js模板遠遠優於jquery模板，可用於在html中呈現復雜的json對象