Ich erhalte den folgenden JSON-String vom Server als Antwort
[{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]
Hier ist mein Jquery Code
$('#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
});
Die Meldung zeigt den JSON-String korrekt an. Jetzt möchte ich diese Antwort auf meine Tabelle abbilden
sagen wir
Wie kann ich das tun?
Versuchen Sie dies:
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
});
<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>
die Daten in einer Schleife durchgehen und sie an eine Tabelle anhängen, wie im obigen Code.
Überprüfen Sie den untenstehenden Link, um JSON-Daten auf einfachste und schnellste Weise in eine Standard-HTML-Tabelle zu konvertieren.
http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/