Afficher les données JSON dans le tableau HTML

je reçois la chaîne JSON suivante du serveur comme réponse

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

Voici mon Code 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
});

l'alerte affiche correctement la chaîne JSON. Maintenant je veux mappeler cette réponse à ma table

Comment puis-je le faire ??

21
demandé sur Krupesh Kotecha 2013-11-11 12:28:01

6 réponses

essaye ceci:

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
});
33
répondu Hiral 2014-03-02 20:06:49

comme alternative aux réponses que vous avez déjà, et pour d'autres qui viennent à travers ce post. J'ai récemment eu une tâche similaire et créé un petit jQuery plug in pour le faire pour moi. Son assez petit sous 3KB miniified, et a le tri, la pagination et la capacité de montrer et cacher des colonnes.

il devrait être assez facile de personnaliser en utilisant css. Plus d'informations peuvent être trouvées ici http://mrjsontable.azurewebsites.net/ et le projet est disponible pour vous de faire comme vous souhaitez avec sur github https://github.com/MatchingRadar/Mr.JsonTable

Pour faire fonctionner télécharger les fichiers et de la pop dans votre site. Suivez les instructions et vous devriez vous retrouver avec quelque chose comme:

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

puis dans la méthode de succès ajax vous voudrez quelque chose comme ceci

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

j'Espère que ça aide quelqu'un d'autre!

4
répondu Adween 2014-01-30 09:33:04

il y a beaucoup de plugins pour faire ça. J'utilise normalement des datatables, ça marche très bien. http://datatables.net/

3
répondu Miquel Las Heras 2013-11-11 09:02:06
          <table id="myData">

          </table>

           <script type="text/javascript">
              $('#search').click(function() {
                    alert("submit handler has fired");
                    $.ajax({
                        type: 'POST',
                        url: 'cityResults.htm',
                        data: $('#cityDetails').serialize(),

                        success: function(data){ 
                            $.each(data, function( index, value ) {
                               var row = $("<tr><td>" + value.city + "</td><td>" + value.cStatus + "</td></tr>");
                               $("#myData").append(row);
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                            alert('error: ' + textStatus + ': ' + errorThrown);
                        }
                    });
                    return false;//suppress natural form submission
                }); 

   </script>

boucle les données et les ajoute à une table comme le code ci-dessus.

2
répondu Gabriel Sadaka 2013-11-11 08:39:04

veuillez utiliser datatable si vous voulez obtenir le résultat de l'objet json. Datatable fonctionne également de la même manière de convertir le résultat json en format de tableau avec la possibilité de rechercher et les colonnes sortables automatiquement.

0
répondu Maclane 2014-01-30 09:37:39

cochez ci-dessous le lien pour convertir les données JSON à la table HTML standard de la manière la plus simple et la plus rapide.

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

-1
répondu Anurag 2013-11-11 08:50:04