Usando jQuery para construir filas de tabla a partir de la respuesta Ajax (Json)

Posible duplicar elementos nesteds

Estoy recibiendo una respuesta ajax del lado del servidor (Json) y estoy intentando crear dinámicamente filas de tablas y anexarlas a la tabla existente (ID: #records_table );

Traté de implementar la solución en un posible duplicado pero falló.

Mi respuesta es así:

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

el resultado requerido es algo como eso:

  9 Alon 5   6 Tala 5  

Quiero hacer algo sin analizar al Json, así que traté de hacer lo siguiente, que por supuesto fue un desastre:

  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 mi solución obtengo solo una fila con el número 6 en todas las celdas. ¿Qué estoy haciendo mal?

Utilice .append en lugar 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 = $('').append( $('').text(item.rank), $('').text(item.content), $('').text(item.UID) ); //.appendTo('#records_table'); console.log($tr.wrap('

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

Prueba esto:

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

Fiddle DEMO CON AJAX

Aquí hay una respuesta completa de hmkcode.com

Si tenemos esos datos 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"] } ]; 

Y queremos ver en esta estructura de tabla

 
Title Categories Tags

El siguiente código JS llenará creará una fila para cada elemento 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) ); }); 

Pruébalo así:

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

Demostración: http://jsfiddle.net/R5bQG/

No debe crear objetos jquery para cada celda y fila. Prueba esto:

 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: urlString , 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" ); } }); 

Creé esta función 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 = ''; //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); } ;

Podrías hacer algo como esto:

        

jQuery.html toma cadena o callback como entrada, no está seguro de cómo funciona su ejemplo … Pruebe algo como $('

').append($('

' + item.rank + '

').append ...

Y tienes algunos problemas definidos con fromation de tags. Debe ser $('

') y $('

')

Lo sigo para obtener respuesta JSON de Ajax y analizar sin usar parseJson:

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

Si está utilizando dataType como texto, entonces necesita $ .parseJSON (respuesta)

Datos como JSON :

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

Puede usar jQuery para iterar sobre JSON y crear tablas dinámicamente:

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

Aquí está la función size_of_array:

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

También puede agregar estilo si es necesario:

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

Resultado :

enter image description here

Por supuesto, puede usar una biblioteca que hace estas cosas por usted. Por ejemplo, en Kedion simplemente agrega JSON a la función add_visual:

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

O simplemente puede tomar el JSON de su URL y usarlo con su biblioteca de su elección:

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

enter image description here