寫的這個JSON結果（解析JSON）

Question

我有這樣的JSON結果這個HTML：

{ 
    "html_content": [ 
     [ 
      [ 
       "Navegantes", 
       "11", 
       "8", 
       "3", 
       "0" 
      ] 
     ], 
     [ 
      [ 
       "Tigres", 
       "11", 
       "8", 
       "3", 
       "0" 
      ] 
     ], 
     [ 
      [ 
       "Caribes", 
       "11", 
       "6", 
       "5", 
       "2" 
      ] 
     ], 
     [ 
      [ 
       "Leones", 
       "11", 
       "6", 
       "5", 
       "2" 
      ] 
     ], 
     [ 
      [ 
       "Aguilas", 
       "11", 
       "5", 
       "6", 
       "3" 
      ] 
     ], 
     [ 
      [ 
       "Tiburones", 
       "10", 
       "4", 
       "6", 
       "3.5" 
      ] 
     ], 
     [ 
      [ 
       "Cardenales", 
       "10", 
       "3", 
       "7", 
       "4.5" 
      ] 
     ], 
     [ 
      [ 
       "Bravos", 
       "11", 
       "3", 
       "8", 
       "5" 
      ] 
     ] 
    ] 
} 

而且我需要建立，對於每一個HTML標記像這樣的：

<tr> 
    <td>Navegantes</td> 
    <td>11</td> 
    <td>8</td> 
    <td>3</td> 
    <td>0</td> 
    <td> 
     <span class="glyphicon glyphicon-play"></span> 
     <span class="glyphicon glyphicon-stop"></span> 
    </td> 
</tr> 
<tr> 
    <td>Tigres</td> 
    <td>11</td> 
    <td>8</td> 
    <td>3</td> 
    <td>0</td> 
    <td> 
     <span class="glyphicon glyphicon-play"></span> 
     <span class="glyphicon glyphicon-stop"></span> 
    </td> 
</tr> 

而且等等，我做了這樣的代碼：

$.each(data.html_content, function(i, v) { 
    htm += "here goes the HTML code"; 
}); 

但是這不起作用我認爲由於數組類型，可以提供任何幫助嗎？

Answer 1

事情是這樣的：

for (var i = 0; i < data.html_content.length; i++) { 
    var tr = "<tr>"; 
    var td = ""; 
    for (var j = 0; j < data.html_content[i][0].length; j++) { 
     td += "<td>" + data.html_content[i][0][j] + "</td>"; 
    } 
    tr += td + "<td><span></span><span></span></td></tr>"; 
    $("table").append(tr); 
} 

Answer 2

您可以從頭開始編寫此代碼，但有很多JS templating scripts available可以使用JSON。

請參閱：http://coding.smashingmagazine.com/2012/12/05/client-side-templating/他們如何工作。

Answer 3

下面是一個基本的解決方案弗朗劃痕：

$.each(data.html_content, function(i, v) { 
    htm += '<tr>' + 
     ' <td>' + i[0][0] + '</td>' + 
     ' <td>' + i[0][1] + '</td>' + 
     ' <td>' + i[0][2] + '</td>' + 
     ' <td>' + i[0][3] + '</td>' + 
     ' <td>' + i[0][4] + '</td>' + 
     ' <td>' + 
     '  <span class="glyphicon glyphicon-play"></span>' + 
     '  <span class="glyphicon glyphicon-stop"></span>' + 
     ' </td>' + 
     '</tr>'; 
}); 

Answer 4

你可以嘗試這樣的事情（AN EXAMPLE.）

var table = $('<table/>') 
$.each(data.html_content, function(k, v){ 
    var tr = $('<tr/>'); 
    $.each(v[0], function(i, j){ 
     $('<td/>', { 'text':j }).appendTo(tr); 
    }); 
    var sp1 = $('<span/>', { 'class':'glyphicon glyphicon-play', 'text':'Play' }); 
    var sp2 = $('<span/>', { 'class':'glyphicon glyphicon-stop', 'text':'Stop' }); 
    var tdSpan = $('<td/>'); 
    tdSpan.append(sp1).append(sp2); 
    tr.append(tdSpan); 
    table.append(tr); 
}); 
$('body').append(table);