web-dev-qa-db-fra.com

Utilisation de jQuery pour construire des lignes de table à partir de AJAX response (json)

Double possible éléments imbriqués

Je reçois de la réponse ajax côté serveur (Json) et j'essaie de créer dynamiquement des lignes de table et de les ajouter à la table existante (ID: #records_table);

J'ai essayé d'implémenter la solution en double possible mais cela a échoué.

Ma réponse ressemble à ça:

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

le résultat requis est quelque chose comme ça:

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

Je veux faire quelque chose sans analyser le Json alors j'ai essayé de faire ce qui suit, ce qui était bien sûr un désastre:

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

            });
        });


    }

De ma solution, je n'obtiens qu'une seule ligne avec le nombre 6 dans toutes les cellules. Qu'est-ce que je fais mal?

jqueryjsonhtml-table
70
Canttouchit

Utilisez .append au lieu de .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());
    });
});
118
drizzie

Essayez ceci (lien DEMO mis à jour):

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);
    }

Violon DEMO AVEC AJAX

36
Neeraj Singh

Voici une réponse complète de hmkcode.com

Si nous avons de telles données 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"]
    }
];

Et nous voulons voir dans cette structure de table

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

Le code JS suivant remplira créer une ligne pour chaque élément 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)
    ); 
});
11
hmkcode

Essayez comme ça:

$.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');
});

Démo: http://jsfiddle.net/R5bQG/

5
tymeJV
$.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" );
  }
});
4
Iftikhar Khan

Vous ne devez pas créer d'objets jQuery pour chaque cellule et ligne. Essaye ça:

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(""));
}
4
YD1m

Données en tant que JSON:

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

Vous pouvez utiliser jQuery pour effectuer une itération sur JSON et créer des tables de manière dynamique:

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);
})

Voici la fonction size_of_array:

function size_of_array(obj) {
    size = Object.keys(obj).length;
    return(size)
    };

Vous pouvez également ajouter un style si nécessaire:

$('.' + 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');

Résultat :

enter image description here

OU UTILISEZ AZLE

En Azle vous ajoutez simplement des données JSON pour créer une table comme suit:

Ajouter une section avec une division de détention:

az.add_sections({
    "this_class": "my_sections",
    "sections": 1
})
az.add_html('my_sections', 1, {
    "html": "<div class='holdng_div'></div>"
})

enter image description here

Créez une fonction encapsulée qui dessine la table. Ici, j'utilise les fonctions add_layout et de fill_row de Azle, ainsi que des boucles et style:

az.add_wrapped_function({
        "name": "draw_table",
        "function": function draw_table(data) {
            az.add_layout('holdng_div', 1, {
                "this_class": "my_table",
                "row_class": "my_table_rows",
                "cell_class": "my_table_cells",
                "number_of_rows": data.length,
                "number_of_columns": 5
            })
            data_ = data
            az.fill_row('my_table', 1, {
                "header": false,
                "cell_class": "my_table_cells",
                "text_class": "header_text",
                "row_number": 1,
                "array": Object.keys(data[0])
            })
            az.all_style_text('header_text', {
                "color": "yellow",
                "font-family": "Arial"
            })
            az.call_multiple({
                "iterations": data.length,
                "function": `
                    az.fill_row('my_table', 1, {
                        "header": true,
                        "cell_class": "my_table_cells",
                        "row_number": index + 1,
                        "array": [data_[index]['sepalLength'],data_[index]['sepalWidth'],data_[index]['petalLength'],data_[index]['petalWidth'],data_[index]['species']]
                        })
                        `
            })
            az.alternate_row_color('my_table', 1, 'whitesmoke', '#33AADE', 'black', 'black', true)
        }
    })

Enfin, appelez une API qui renvoie des données (j'utilise ici le jeu de données Iris hébergé sur Github) et transmettez ces données à notre fonction encapsulée:

az.call_api({
        "url": "https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json",
        "parameters": {},
        "done": "az.call_wrapped_function.draw_table(data)"
    })

Résultat :

enter image description here

Voici le Gist

Voici le VIOLON

2
Cybernetic

Vous pourriez faire quelque chose comme ça:

<!-- 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>
1
Kunal Mukherjee

J'ai créé cette fonction 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);
}
;
1
M_R_K

Voici un exemple de travail que j'ai copié de mon projet.

 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>
0
Malhaar Punjabi

jQuery.html prend une chaîne ou un rappel en entrée, vous ne savez pas comment votre exemple fonctionne ... Essayez quelque chose comme $('<tr>').append($('<td>' + item.rank + '</td>').append ... Et vous avez des problèmes certains avec les balises fromation. Il devrait être $('<tr/>') et $('<td/>')

0
duskpoet

Je fais ensuite pour obtenir une réponse JSON de Ajax et analyser sans utiliser parseJson:

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

Si vous utilisez dataType en tant que texte, vous avez besoin de $ .parseJSON (réponse)

0
Harpreet