Utiliser jQuery pour construire des lignes de table à partir de la réponse Ajax (Json)

Éléments nesteds possibles en double

Je reçois une réponse ajax côté serveur (Json) et j’essaie de créer dynamicment des lignes de table et de les append à 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 requirejs est quelque chose comme ça:

  9 Alon 5   6 Tala 5  

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

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

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

Utiliser .append au lieu de .html

 var response = "[{ "rank":"9", "content":"Alon", "UID":"5" }, { "rank":"6", "content":"Tala", "UID":"6" }]"; // convert ssortingng to JSON response = $.parseJSON(response); $(function() { $.each(response, function(i, item) { var $tr = $('').append( $('').text(item.rank), $('').text(item.content), $('').text(item.UID) ); //.appendTo('#records_table'); console.log($tr.wrap('

').html()); }); });

Essaye ça:

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

Violon DEMO AVEC AJAX

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 tableau

 
Title Categories Tags

Le code JS suivant va 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 = $(""); // 2.3 get each category of this article $.each(article.categories, function (i, category) { var span = $(""); span.text(category); td_categories.append(span); }); // 2.4 Create table column for tags var td_tags = $(""); // 2.5 get each tag of this article $.each(article.tags, function (i, tag) { var 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($('') .append($('').html(""+article.title+"")) .append(td_categories) .append(td_tags) ); }); 

Essayez comme ceci:

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

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

Vous ne devez pas créer d’objects jquery pour chaque cellule et chaque ligne. Essaye ça:

 function responseHandler(response) { var c = []; $.each(response, function(i, item) { c.push("" + item.rank + ""); c.push("" + item.content + ""); c.push("" + item.UID + ""); }); $('#records_table').html(c.join("")); } 
 $.ajax({ type: 'GET', url: urlSsortingng , dataType: 'json', success: function (response) { var trHTML = ''; for(var f=0;f'+response[f]['action_type'] +''+response[f]['points']+''; } $('#result').html(trHTML); $( ".spin-grid" ).removeClass( "fa-spin" ); } }); 

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 {ssortingng} destinaion_element '#id' or '.class': html output will be rendered to this element * @returns {ssortingng} 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 = ''; //TH Loop table += ''; $.each(head_array, function (head_array_key, head_array_value) { table += ''; }); table += ''; //TR loop $.each(json_data_array, function (key, value) { table += ''; //TD loop $.each(item_array, function (item_key, item_value) { table += ''; }); table += ''; }); table += '
' + head_array_value + '
' + value[item_value] + '
'; $(destinaion_element).append(table); } ;

Vous pourriez le faire quelque chose comme ceci:

        

jQuery.html prend la chaîne ou le rappel comme entrée, pas sûr du fonctionnement de votre exemple … Essayez quelque chose comme $('

').append($('

' + item.rank + '

').append ...

Et vous avez des problèmes avec la création de balises. Ce devrait être $('

') et $('

')

Je fais ce qui suit pour obtenir une réponse JSON d’Ajax et parsingr 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 (response)

Données en JSON :

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

Vous pouvez utiliser jQuery pour parcourir JSON et créer des tables de manière dynamic:

 num_rows = data.length; num_cols = size_of_array(data[0]); table_id = 'my_table'; table = $("
"); header = $(""); $.each(Object.keys(data[0]), function(ind_header, val_header) { col = $("" + val_header + ""); header.append(col); }) table.append(header); $.each(data, function(ind_row, val) { row = $(""); $.each(val, function(ind_cell, val_cell) { col = $("" + val_cell + ""); 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 append 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 :

entrer la description de l'image ici

Bien sûr, vous pouvez utiliser une bibliothèque qui fait ces choses pour vous. Par exemple, dans Kedion, vous ajoutez simplement JSON à la fonction add_visual:

 add_visual("target_class", 1, { "this_class" : "my_visual", "type" : "table", "width" : "500px", "height" : "300px", "data" : data // your data object here }) 

Ou vous pouvez simplement saisir le JSON de votre URL et l’utiliser avec votre bibliothèque de choix:

 $.getJSON('https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json', function(data) { add_visual("my_sections", 6, { "this_class" : "my_visual", "type" : "table", "width" : "90%", "height" : "300px", "data_color" : "#33AADE", "data" : data }) style_visual('my_visual', 1, { "font-family" : "arial" }) }); 

entrer la description de l'image ici