CODEWITHSUNDEEP
jqueryajaxhtml-table
j-p
j-p

Reputation: 3818

Populate tables with JSON, using jQuery

I've read all the posts on Stack Overflow that refer to this topic - I distilled what thought I needed... and what I have still doesn't work.

I would like to load data into a table - using jQuery (unless js has a native way of doing this) here is my code.

[side question - is there a way to dump the response object to the screen? so I can see all the elements avail? ]

MAIN PAGE

<html>
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></head>
<body>
<table>
    <tbody id="testBody">
    </tbody>
</table>

<script>
$( document ).ready( function() {
$( '#testBody' ).html( 'Here We Go...<br/>' );

$.ajax({
type: "POST",
url: "ajax_list_json.htm",
dataType: "json",
success: function ( response ) {
    if( response.success ) {
        //...do something...
        $('#testBody').html('<p>We were successful!</p>');
    } else {
        //...tell user there was a problem...
        $('#testBody').html('<p>There was a problem on the server... Dang.</p>');
        //$('#testBody').append( response ); // was trying to dump the response
    }
}

})

});
</script>
</body>
</html>

And here is the JSON I'm sending back... This is currently hard coded in this format - but I'll bake it dynamic as soon as my process is correct.

{
"people": [
    { "firstName":"John" , "lastName":"Doe" },
    { "firstName":"Jane" , "lastName":"Smith" },
    { "firstName":"Rusty" , "lastName":"Morals" },
    { "firstName":"oo'ja" , "lastName":"d'Addy" },
    { "firstName":"Wink" , "lastName":"Martindale" },
    { "firstName":"Woody" , "lastName":"Knowl" },
    { "firstName":"Tom" , "lastName":"Thumb" },
    { "firstName":"Peter" , "lastName":"Pan" }
]
}

the response in Firebug comes back correctly - or what I'd expect at least. and the JSON tab in Firebug shows the right array - so I believe I'm formatted correctly.

Any help? I guess I can't progress on putting the data into the table until I'm getting past the 'error check on the response... :(

Upvotes: 0

Views: 1394

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 219920

If there's a problem with the request, your success callback won't fire.

The JSON is being passed into your success callback directly:

$.ajax({
    type: "POST",
    url: "ajax_list_json.htm",
    dataType: "json",
    success: function ( JSONdata ) {
        // all's good, loop through your JSONdata
    },
    error: function () {
        // there's an error
    }
});

Upvotes: 3

Related Questions