Verwenden von jQuery zum Erstellen von Tabellenzeilen aus der AJAX-Antwort (json)

78

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?

Canttouchit
quelle

Antworten:

139

Verwenden Sie .append anstelle von .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());
    });
});
drizzie
quelle
1
Dies funktioniert und ermöglicht es, tdElemente sauber zu verwalten
Luis Siquot
2
Ich habe die Lösung aktualisiert. Sie müssen Ihre Zeichenfolge mit der $ .parseJSON-Funktion von jQuery in JSON konvertieren. jsfiddle.net/abduncan/rrzZU/1
drizzie
3
Das Anhängen von Daten mit jQuery ist keine gute Idee für große Datenmengen. Sie werden am Ende ein Problem mit dem Browser-Rendering haben. Stattdessen können wir join () verwenden, um abgeschnittene Zeichenfolgen zu generieren, die
angezeigt werden sollen
1
Hallo, aber wie hängt diese Antwort mit dem Hinzufügen dieser Informationen zur HTML-Datei #recordsTable zusammen?
GoldenEagle
2
Wenn Sie sich die 4. Zeile von unten ansehen, die den Kommentar enthält //.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.
Drizzie
41

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

Neeraj Singh
quelle
@ Charlesliam Ich bin froh, Ihnen zu helfen .. :)
Neeraj Singh
@ NeerajSingh Link gebrochen
Code-EZ
2
Link ist abgelaufen.
Abhishek Pandey
Gibt es sowieso CSS für das td aufzunehmen?
Aroon
@alper Danke für deinen Kommentar, der Demo-Link wurde jetzt aktualisiert.
Neeraj Singh
11

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)
    ); 
});  
hmkcode
quelle
Das Beispiel funktioniert nicht mehr, 404. "Hier ist eine vollständige Antwort von hmkcode.com."
RaRdEvA
7

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/

tymeJV
quelle
Kann es verbessert werden? Ich möchte auch ein Steuerelement für die Zellen haben, zum Beispiel, wenn ich ein Attribut in td setzen möchte.
Canttouchit
Sicher, Sie können dies auf viele Arten tun, Sie können jeden TD erstellen und dann anhängen oder Sie können das Attribut direkt im obigen Tag festlegen. Welches Attribut Sie hinzufügen möchten, geben Sie ein Beispiel.
TymeJV
Dies funktioniert nicht, denke ich, weil meine Antwort als Zeichenfolge "[{ "rank":"9", "content":"Alon", "UID":"5" }, { "rank":"6", "content":"Tala", "UID":"6" }]"
lautet
4

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(""));
}
YD1m
quelle
4
$.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" );
  }
});
Iftikhar Khan
quelle
3

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 :

Geben Sie hier die Bildbeschreibung ein

Kybernetisch
quelle
1

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);
}
;
M_R_K
quelle
1

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>
Kunal Mukherjee
quelle
0

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/>')

Abenddämmerung
quelle
0

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)

Harpreet
quelle
0

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>
         
 
    
    
    

Malhaar Punjabi
quelle
Ich verwende Ihren einzigen Append-Block. Ich zeige Daten im Bootstrap-Modal an. Das Problem ist, dass jedes Mal und auch die vorherigen Daten angehängt werden.
Ali Raza