使用jQuery建立從Ajax響應（JSON）錶行

Question

可能重複Nested elements

我從服務器端Ajax響應（JSON），我得到我想要動態地創建錶行 並追加到現有表（ID：#records_table）;

我試圖在可能的重複中實現解決方案，但失敗了。

我的反應看起來像這樣：

 "[{ 
     "rank":"9", 
     "content":"Alon", 
     "UID":"5" 
    }, 
    { 
     "rank":"6", 
     "content":"Tala", 
     "UID":"6" 
    }]" 

的要求的結果是類似的東西：

<tr> 
    <td>9</td> 
    <td>Alon</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>6</td> 
    <td>Tala</td> 
    <td>5</td> 
</tr> 

我想要做的事，而不解析JSON的，所以我試着做以下，這當然是一場災難：

function responseHandler(response) 
    { 

     $(function() { 
      $.each(response, function(i, item) { 
       $('<tr>').html(
        $('td').text(item.rank), 
        $('td').text(item.content), 
        $('td').text(item.UID) 
       ).appendTo('#records_table'); 

      }); 
     }); 


    } 

從我的解決方案，我只得到一行與n所有單元格都是6號。我究竟做錯了什麼？

Answer 1

改用的.html

var response = "[{ 
     "rank":"9", 
     "content":"Alon", 
     "UID":"5" 
    }, 
    { 
     "rank":"6", 
     "content":"Tala", 
     "UID":"6" 
    }]"; 

// convert string to JSON 
response = $.parseJSON(response); 

$(function() { 
    $.each(response, function(i, item) { 
     var $tr = $('<tr>').append(
      $('<td>').text(item.rank), 
      $('<td>').text(item.content), 
      $('<td>').text(item.UID) 
     ); //.appendTo('#records_table'); 
     console.log($tr.wrap('<p>').html()); 
    }); 
}); 

Answer 2

試試這樣說：

$.each(response, function(i, item) { 
    $('<tr>').html("<td>" + response[i].rank + "</td><td>" + response[i].content + "</td><td>" + response[i].UID + "</td>").appendTo('#records_table'); 
}); 

演示：.append的http://jsfiddle.net/R5bQG/

Answer 3

你不應該爲每個單元格和行jQuery的對象。試試這個：

function responseHandler(response) 
{ 
    var c = []; 
    $.each(response, function(i, item) {    
     c.push("<tr><td>" + item.rank + "</td>"); 
     c.push("<td>" + item.content + "</td>"); 
     c.push("<td>" + item.UID + "</td></tr>");    
    }); 

    $('#records_table').html(c.join("")); 
} 

Answer 4

jQuery.html需要字符串或回調作爲輸入，不知道如何你的例子是工作...嘗試像$('<tr>').append($('<td>' + item.rank + '</td>').append ... 你有標籤fromation一些明確的問題。它應該是$('<tr/>')和$('<td/>')

Answer 5

試試這個：

success: function (response) { 
     var trHTML = ''; 
     $.each(response, function (i, item) { 
      trHTML += '<tr><td>' + item.rank + '</td><td>' + item.content + '</td><td>' + item.UID + '</td></tr>'; 
     }); 
     $('#records_table').append(trHTML); 
    } 

Fiddle DEMO WITH AJAX

Answer 6

這裏是hmkcode.com

一個完整的答案。如果我們有這樣的JSON數據

// JSON Data 
var articles = [ 
    { 
     "title":"Title 1", 
     "url":"URL 1", 
     "categories":["jQuery"], 
     "tags":["jquery","json","$.each"] 
    }, 
    { 
     "title":"Title 2", 
     "url":"URL 2", 
     "categories":["Java"], 
     "tags":["java","json","jquery"] 
    } 
]; 

我們要查看該表結構

<table id="added-articles" class="table"> 
      <tr> 
       <th>Title</th> 
       <th>Categories</th> 
       <th>Tags</th> 
      </tr> 
     </table> 

下面的JS代碼將填補每一個JSON元素

// 1. remove all existing rows 
$("tr:has(td)").remove(); 

// 2. get each article 
$.each(articles, function (index, article) { 

    // 2.2 Create table column for categories 
    var td_categories = $("<td/>"); 

    // 2.3 get each category of this article 
    $.each(article.categories, function (i, category) { 
     var span = $("<span/>"); 
     span.text(category); 
     td_categories.append(span); 
    }); 

    // 2.4 Create table column for tags 
    var td_tags = $("<td/>"); 

    // 2.5 get each tag of this article  
    $.each(article.tags, function (i, tag) { 
     var span = $("<span/>"); 
     span.text(tag); 
     td_tags.append(span); 
    }); 

    // 2.6 Create a new row and append 3 columns (title+url, categories, tags) 
    $("#added-articles").append($('<tr/>') 
      .append($('<td/>').html("<a href='"+article.url+"'>"+article.title+"</a>")) 
      .append(td_categories) 
      .append(td_tags) 
    ); 
}); 

Answer 7

$.ajax({ 
    type: 'GET', 
    url: urlString , 
    dataType: 'json', 
    success: function (response) { 
    var trHTML = ''; 
    for(var f=0;f<response.length;f++) { 
     trHTML += '<tr><td><strong>' + response[f]['app_action_name']+'</strong></td><td><span class="label label-success">'+response[f]['action_type'] +'</span></td><td>'+response[f]['points']+'</td></tr>'; 
    } 
    $('#result').html(trHTML); 
    $(".spin-grid").removeClass("fa-spin"); 
    } 
}); 

Answer 8

我創造了這個jQuery函數

創建一行

/** 
* Draw a table from json array 
* @param {array} json_data_array Data array as JSON multi dimension array 
* @param {array} head_array Table Headings as an array (Array items must me correspond to JSON array) 
* @param {array} item_array JSON array's sub element list as an array 
* @param {string} destinaion_element '#id' or '.class': html output will be rendered to this element 
* @returns {string} HTML output will be rendered to 'destinaion_element' 
*/ 

function draw_a_table_from_json(json_data_array, head_array, item_array, destinaion_element) { 
    var table = '<table>'; 
    //TH Loop 
    table += '<tr>'; 
    $.each(head_array, function (head_array_key, head_array_value) { 
     table += '<th>' + head_array_value + '</th>'; 
    }); 
    table += '</tr>'; 
    //TR loop 
    $.each(json_data_array, function (key, value) { 

     table += '<tr>'; 
     //TD loop 
     $.each(item_array, function (item_key, item_value) { 
      table += '<td>' + value[item_value] + '</td>'; 
     }); 
     table += '</tr>'; 
    }); 
    table += '</table>'; 

    $(destinaion_element).append(table); 
} 
; 

Answer 9

你可以這樣做：

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


    <script> 
    $(function(){ 

    $.ajax({ 
    url: '<Insert your REST API which you want GET/POST/PUT/DELETE>', 
    data: '<any parameters you want to send as the Request body or query string>', 
    dataType: json, 
    async: true, 
    method: "GET" 
    success: function(data){ 

    //If the REST API returned a successful response it'll be stored in data, 
    //just parse that field using jQuery and you're all set 

    var tblSomething = '<thead> <tr> <td> Heading Col 1 </td> <td> Heading Col 2 </td> <td> Col 3 </td> </tr> </thead> <tbody>'; 

    $.each(data, function(idx, obj){ 

    //Outer .each loop is for traversing the JSON rows 
    tblSomething += '<tr>'; 

    //Inner .each loop is for traversing JSON columns 
    $.each(obj, function(key, value){ 
    tblSomething += '<td>' + value + '</td>'; 
    }); 
    tblSomething += '</tr>'; 
    }); 

    tblSomething += '</tbody>'; 

    $('#tblSomething').html(tblSomething); 
    }, 
    error: function(jqXHR, textStatus, errorThrown){ 
    alert('Hey, something went wrong because: ' + errorThrown); 
    } 
    }); 


    }); 
    </script> 


    <table id = "tblSomething" class = "table table-hover"></table> 

Answer 10

我下面從阿賈克斯得到JSON的響應，並且不使用解析parseJson：

$.ajax({ 
    dataType: 'json', <---- 
    type: 'GET', 
    url: 'get/allworldbankaccounts.json', 
    data: $("body form:first").serialize(), 

如果您正在使用的dataType爲文本，那麼你需要$ .parseJSON（響應）