Mostrar datos JSON en la tabla HTML

Obtengo la siguiente cadena JSON del servidor como respuesta

[{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}] 

Aquí está mi código de Jquery

 $('#search').click(function() { alert("submit handler has fired"); $.ajax({ type: 'POST', url: 'cityResults.htm', data: $('#cityDetails').serialize(), success: function(data){ alert(data); }, error: function(jqXHR, textStatus, errorThrown){ alert('error: ' + textStatus + ': ' + errorThrown); } }); return false;//suppress natural form submission }); 

La alerta muestra la cadena JSON correctamente. Ahora quiero asignar esta respuesta a mi mesa

decir

Cómo puedo hacer eso ??

Prueba esto:

CSS:

 .hidden{display:none;} 

HTML:

  

JS:

 $('#search').click(function() { $.ajax({ type: 'POST', url: 'cityResults.htm', data: $('#cityDetails').serialize(), dataType:"json", //to parse string into JSON object, success: function(data){ if(data){ var len = data.length; var txt = ""; if(len > 0){ for(var i=0;i"+data[i].cStatus+""; } } if(txt != ""){ $("#table").append(txt).removeClass("hidden"); } } } }, error: function(jqXHR, textStatus, errorThrown){ alert('error: ' + textStatus + ': ' + errorThrown); } }); return false;//suppress natural form submission }); 

Como una alternativa a las respuestas que ya tienes, y para otros que vienen a través de esta publicación. Hace poco tuve una tarea similar y creé un pequeño complemento de jquery para hacerlo por mí. Es bastante pequeño en 3 KB minificado, y tiene clasificación, paginación y la capacidad de mostrar y ocultar columnas.

Debería ser bastante fácil de personalizar usando css. Puede encontrar más información aquí http://mrjsontable.azurewebsites.net/ y el proyecto está disponible para que pueda hacer lo que desee en github https://github.com/MatchingRadar/Mr.JsonTable

Para que funcione, descarga los archivos y páselos a tu sitio. Sigue las instrucciones y deberías terminar con algo como lo siguiente:

 

Luego, en el método de éxito de AJAX querrás algo como esto

 success: function(data){ $("#citytable").mrjsontable({ tableClass: "my-table", pageSize: 10, //you can change the page size here columns: [ new $.fn.mrjsontablecolumn({ heading: "City", data: "city" }), new $.fn.mrjsontablecolumn({ heading: "City Status", data: "cStatus" }) ], data: data }); } 

Espero que ayude a alguien más!

Hay muchos complementos para hacer eso. Normalmente uso datatables funciona muy bien. http://datatables.net/

  

recorra los datos y añádalos a una tabla como el código anterior.

Utilice datatable si desea obtener el resultado del objeto json. Datatable también funciona de la misma manera que convertir el resultado json en formato de tabla con la facilidad de columnas que se pueden buscar y ordenar automáticamente.

Verifique el enlace a continuación para convertir datos JSON a una tabla HTML estándar de la manera más simple y rápida.

http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/