Mostrar datos JSON en una tabla HTML

Solución:

Prueba esto:

CSS:

.hidden{display:none;}

HTML:

<table id="table" class="hidden">
    <tr>
        <th>City</th>
        <th>Status</th>
    </tr>
</table>

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<len;i++){
                        if(data[i].city && data[i].cStatus){
                            txt += "<tr><td>"+data[i].city+"</td><td>"+data[i].cStatus+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#table").append(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
    return false;//suppress natural form submission
});

Como alternativa a las respuestas que ya tiene, y para otras que se cruzan con esta publicación. Recientemente tuve una tarea similar y creé un pequeño complemento de jquery para hacerlo por mí. Es bastante pequeño, menos de 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 lo haga como desee en github https://github.com/MatchingRadar/Mr.JsonTable

Para que funcione, descargue los archivos y colóquelos en su sitio. Siga las instrucciones y debería terminar con algo como lo siguiente:

<div id="citytable"></div>

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 tablas de datos, funciona muy bien. http://datatables.net/

---

---

Utiliza Nuestro Buscador