jQuery Parse JSON Response

Question

I am successfully Posting to a PHP file, and getting a good response. The part I cannot seem to get is parsing it out then displaying it on my page. Here is my javascript in a validate handler:

submitHandler: function(form) {
    var formData = $(form).serialize();
    $.post('http://test.php', formData, function(data) {
        if(data.success) {
            $('#load').show();
            var response = i;
            $('#load').hide();
            //var msg = '';
            for(var i = 0; i < x.flights.length; i++) {
               msg += '<span>';
               msg += '<p>Flight Number: ' + x.flights[i].flight_number + '</p>';
               msg += '<p>Cost: ' + x.flights[i].cost + '</p>';
               msg += '</span>';
            }
            //this is were I think it should display. but It's not working

            $('#load').html(msg);

Here is my json response:

   success
true

 message
"Success"

flights
[Object { flight_number="334", cost="983.40", departure_city="Kearney Regional Airpor...arney, Nebraska - (EAR)", more...}]

0
Object { flight_number="334", cost="983.40", departure_city="Kearney Regional Airpor...arney, Nebraska - (EAR)", more...}

flight_number
"334"

cost
"983.40"

departure_city
"Kearney Regional Airport, Kearney, Nebraska - (EAR)"

arrival_city
"Chadron Muni Airport, Chadron, Nebraska - (CDR)"

departs
"2014-03-19 04:33:00"

arrives
"2014-03-19 08:12:00"

duration
"219"

adult_seats_available
"2"

senior_seats_available
"1"

I know you you are not seeing the JSON response, but I can see it in FF firebug. I'm new to jQuery/JSON, and I just want to print the response to my page. Thanks in advance.

Answer 1

Look into JSON.stringify(data) doc I don't know where you want to display your JSON but if you just want to see what it is open up the debugger and console.log(JSON.stringify(data)); should do it.

Answer 2

You are using post method and it may default return xml, json, script, text, html. So you are getting the data from post method.

Try looking at https://api.jquery.com/jQuery.post/

And if you want to access it, then you can use JSON.stringify(data) to show json as a string. And to access data from json you can use dot(.) notation.

Answer 3

There's a couple of things to look at here.

First you're adding your html (ie msg ) to the #load element ( $('#load').html(msg); ) but earlier in the code you're hiding it ( $('#load').hide(); ). So I think this will answer your main question; ie remove the the line $('#load').hide(); or add $('#load').show(); after the line $('#load').html(msg); .

Still not seeing anything? Then perhaps the response isn't as corrent as you're claiming so perhaps an easier way to check what's been assigned to msg is to alert the html alert(msg); <- make this call after you've built your html.

So aside from this is the use of the #load element you seem to be using it to hold a loading gif but also assigning it the response via the content of msg . Perhaps you need to separate the use of the elements so that the #load element is for the loading gif and you add another element for the response. so you're code is more like this.

html

<div id="load" class="hide"><img src="loading-animation.gif">...</div>
<div id="post-response" class="hide alert"><div>

where the hide class is display none and alert class represents an style for a response alert.

js

submitHandler: function(form) {

    // show the loading gif before we make the 
    // post data and wait for an async response
    $('#load').show();

    ...
    $.post('http://test.php', formData, function(data) {
        if(data.success) {

            // post-back has completed so lets hide the animation
            $('#load').hide();

            // your code to build html msg

            // assign and show the response element
            $('post-response').html(msg);
            $('post-response').show();
            ...