Looping through jsonp with jquery

Question

I can see the response is correct in firebug but cant actually access the data it returns - need a pointer. I am of course trying to put the timestamp of an entry into a div - the div does exist.

jquery

$(document).ready(function(){
        $.ajax({
            url: 'http://www.testurl/api.php',
            data: {check: 'one'},
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'jsonpCallback',
            success: function(){
                alert("success");
            }
        });
    });

function jsonpCallback(data){
    $('#jsonpResult').text(data.timestamp);
}

PHP

<?php
header("content-type: text/javascript");
require_once('Connections/con.php');
mysql_select_db($database_ey, $ey);
$query_pledges = "SELECT * FROM pledges ORDER BY timestamp DESC LIMIT 10";
$pledges = mysql_query($query_pledges, $ey) or die(mysql_error());
$totalRows_pledges = mysql_num_rows($pledges);

if (isset($_GET['check'])) {
    $responses = array();
    while ($row_pledges = mysql_fetch_assoc($pledges)) {
        $response    = array(
            'FirstName' => $row_pledges['FirstName'],
            'Surname' => $row_pledges['Surname'],
            'Country' => $row_pledges['Country'],
            'pledge1' => $row_pledges['pledge1'],
            'pledge2' => $row_pledges['pledge2'],
            'pledge3' => $row_pledges['pledge3'],
            'timestamp' => $row_pledges['timestamp']
        );
        $responses[] = $response;
    }
    echo $_GET['callback'] . '(' . json_encode($responses) . ');';
}
?>

My response in firebug looks like

jsonpCallback([{"FirstName":"me","Surname":"lastname","Country":"United Kingdom","pledge1":"pledgeIcon1","pledge2":"pledgeIcon2","pledge3":"pledgeIcon4","timestamp":"1402066487"}]);

As mentioned, I would like to be able to loop through the results in jquery and append to various divs

So what do you get with `$('#jsonpResult').text( JSON.stringify(data) );` in the function instead of your current code? `data.timestamp` isn't valid if `data` is an array! — kero, Jun 06 '14 at 16:58
that gives me the full response so relieved the data is there. How do I break it out individually — Jeff, Jun 06 '14 at 17:00
Then look deeper ;) You should be able to iterate over `data` and then do something like `data[x].timestamp` — kero, Jun 06 '14 at 17:17

score 0 · Answer 1 · answered Jun 06 '14 at 17:50

The loop I needed looks like this

function jsonpCallback(data) {
    $.each(data, function (i, item) {
        $('#jsonpResult').append(
            $('<div/>')
            .addClass("myclass")
            .text(item.timestamp) //item.timestamp
        );
    });
}

score 0 · Answer 2 · answered Jun 06 '14 at 18:25

Its because your jsonpresponse is one array, and you are trying to use it like a single object.

function jsonpCallback(data){
    $('#jsonpResult').text(data.timestamp); // Add the [0] and look what happens.
}

The correct way to use the response is:

function jsonpCallback(data){
    $('#jsonpResult').text(data[0].timestamp);
}

So if u need to iterate will be something like this

Using Each:

function jsconpCallback(data){
    data.each(function(item){
        $('#jsonpResult').append(item.timestamp+"<br />");
    });

}

or standard for:

   function jsonpCallback(data){
       for(var i = 0 ; i < data.length ; i++){
            $('#jsonpResult').append(item.timestamp+"<br />");
       }
   }

Im using append because we are expecting multiple data (one array).

In the case you need only one big object, remove de [] on the PHP file where you are sending de jsonP response.

Hope it helps.

Looping through jsonp with jquery

2 Answers2