Mögliches Duplikat Verschachtelte Elemente
Ich erhalte eine serverseitige Ajax-Antwort (Json) und versuche, Tabellenzeilen dynamisch zu erstellen und sie mit id = an eine vorhandene Tabelle anzuhängen records_table
.
Ich habe versucht, die Lösung in einem möglichen Duplikat zu implementieren, aber es ist fehlgeschlagen.
Meine Antwort sieht so aus:
'[{
"rank":"9",
"content":"Alon",
"UID":"5"
},
{
"rank":"6",
"content":"Tala",
"UID":"6"
}]'
Das erforderliche Ergebnis ist ungefähr so:
<tr>
<td>9</td>
<td>Alon</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>Tala</td>
<td>5</td>
</tr>
Ich möchte etwas tun, ohne den Json zu analysieren, also habe ich Folgendes versucht, was natürlich eine Katastrophe war:
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');
});
});
}
Aus meiner Lösung erhalte ich nur eine Zeile mit der Nummer 6 in allen Zellen. Was mache ich falsch?
jquery
json
html-table
Canttouchit
quelle
quelle
td
Elemente sauber zu verwalten//.appendTo('#records_table');
, wird angezeigt, wie Sie die Datensätze an das DOM anhängen würden. Es wird in dieser Antwort auskommentiert und stattdessen wird das Ergebnis zu Testzwecken in die Konsole geschrieben.Versuchen Sie dies (DEMO-Link aktualisiert):
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); }
Geige DEMO MIT AJAX
quelle
Hier ist eine vollständige Antwort von hmkcode.com
Wenn wir solche JSON-Daten haben
// 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"] } ];
Und wir wollen in dieser Tabelle Struktur sehen
<table id="added-articles" class="table"> <tr> <th>Title</th> <th>Categories</th> <th>Tags</th> </tr> </table>
Der folgende JS-Code füllt eine Zeile für jedes JSON-Element
// 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) ); });
quelle
Versuchen Sie es so:
$.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'); });
Demo: http://jsfiddle.net/R5bQG/
quelle
"[{ "rank":"9", "content":"Alon", "UID":"5" }, { "rank":"6", "content":"Tala", "UID":"6" }]"
Sie sollten keine Abfrageobjekte für jede Zelle und Zeile erstellen. Versuche dies:
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("")); }
quelle
$.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" ); } });
quelle
Daten als JSON :
data = [ { "rank":"9", "content":"Alon", "UID":"5" }, { "rank":"6", "content":"Tala", "UID":"6" } ]
Mit jQuery können Sie über JSON iterieren und Tabellen dynamisch erstellen:
num_rows = data.length; num_cols = size_of_array(data[0]); table_id = 'my_table'; table = $("<table id=" + table_id + "></table>"); header = $("<tr class='table_header'></tr>"); $.each(Object.keys(data[0]), function(ind_header, val_header) { col = $("<td>" + val_header + "</td>"); header.append(col); }) table.append(header); $.each(data, function(ind_row, val) { row = $("<tr></tr>"); $.each(val, function(ind_cell, val_cell) { col = $("<td>" + val_cell + "</td>"); row.append(col); }) table.append(row); })
Hier ist die Funktion size_of_array:
function size_of_array(obj) { size = Object.keys(obj).length; return(size) };
Bei Bedarf können Sie auch Styling hinzufügen :
$('.' + content['this_class']).children('canvas').remove(); $('.' + content['this_class']).append(table); $('#' + table_id).css('width', '100%').css('border', '1px solid black').css('text-align', 'center').css('border-collapse', 'collapse'); $('#' + table_id + ' td').css('border', '1px solid black');
Ergebnis :
quelle
Ich habe diese JQuery-Funktion erstellt
/** * 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); } ;
quelle
Sie könnten es so etwas tun:
<!-- 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>
quelle
jQuery.html verwendet Zeichenfolge oder Rückruf als Eingabe, nicht sicher, wie Ihr Beispiel funktioniert ... Versuchen Sie etwas wie
$('<tr>').append($('<td>' + item.rank + '</td>').append ...
Und Sie haben definitiv Probleme mit der Tags-Fromation. Es sollte$('<tr/>')
und sein$('<td/>')
quelle
Ich folge, um eine JSON-Antwort von Ajax zu erhalten und zu analysieren, ohne parseJson zu verwenden:
$.ajax({ dataType: 'json', <---- type: 'GET', url: 'get/allworldbankaccounts.json', data: $("body form:first").serialize(),
Wenn Sie dataType als Text verwenden, benötigen Sie $ .parseJSON (Antwort)
quelle
Dies ist ein Arbeitsbeispiel, das ich aus meinem Projekt kopiert habe.
function fetchAllReceipts(documentShareId) { console.log('http call: ' + uri + "/" + documentShareId) $.ajax({ url: uri + "/" + documentShareId, type: "GET", contentType: "application/json;", cache: false, success: function (receipts) { //console.log(receipts); $(receipts).each(function (index, item) { console.log(item); //console.log(receipts[index]); $('#receipts tbody').append( '<tr><td>' + item.Firstname + ' ' + item.Lastname + '</td><td>' + item.TransactionId + '</td><td>' + item.Amount + '</td><td>' + item.Status + '</td></tr>' ) }); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest); console.log(textStatus); console.log(errorThrown); } }); } // Sample json data coming from server var data = [ 0: {Id: "7a4c411e-9a84-45eb-9c1b-2ec502697a4d", DocumentId: "e6eb6f85-3f44-4bba-8cb0-5f2f97da17f6", DocumentShareId: "d99803ce-31d9-48a4-9d70-f99bf927a208", Firstname: "Test1", Lastname: "Test1", } 1: {Id: "7a4c411e-9a84-45eb-9c1b-2ec502697a4d", DocumentId: "e6eb6f85-3f44-4bba-8cb0-5f2f97da17f6", DocumentShareId: "d99803ce-31d9-48a4-9d70-f99bf927a208", Firstname: "Test 2", Lastname: "Test2", } ];
<button type="button" class="btn btn-primary" onclick='fetchAllReceipts("@share.Id")'> RECEIPTS </button> <div id="receipts" style="display:contents"> <table class="table table-hover"> <thead> <tr> <th>Name</th> <th>Transaction</th> <th>Amount</th> <th>Status</th> </tr> </thead> <tbody> </tbody> </table> </div>
quelle