[jquery] How to parse JSON array in jQuery?

EDIT I checked the jQuery documentation and using $.ajax with the json datatype specified returns an evaluated javascript object, so eval() isn't the answer here. I knew that anyway, since I am able to parse single JSON objects, just not arrays. The problem is the $.each-ing my way through them :)

I have followed the syntax for parsing a JSON array in jQuery to the letter, but it doesn't work for some reason. I am fetching the array using $.ajax, have specified the correct datatype, and in Firebug can see that the response from my PHP script is []. Yet when I try to use $.each to iterate through the array, all I get is undefined values when I try to console.log various parts of the array. Here is where my php script makes and encodes the array:

if(mysqli_num_rows($new_res) > 0) {
$messages = array();

while($message_data = mysqli_fetch_assoc($query_res)) {
  $message = array(
    'poster' => $message_data['poster'],
    'message' => $message_data['message'],
    'time' => $message_data['time']
  );

  $messages[] = $message;
}

echo json_encode($messages);
} else if(mysqli_num_rows($new_res) == 0) {
$message = array(
  'poster' => '',
  'message' => 'No messages!',
  'time' => 1
);

echo json_encode($message);
}

And here is my attempt to parse it:

   var logged_in = '<?php echo $logged_in; ?>';
   var poster = '<?php echo $_SESSION["poster"];?>';
     $.ajax({
     url: 'do_chat.php5',
     type: 'post',
     data: ({'poster':poster,'logged_in':logged_in}),
     dataType: 'json',
     success: function(data) {
         $.each(data, function(messageIndex, message) {
                    console.log(parseInt($('#chatWindow :last-child > span').html())+' '+message['time']);
       if((parseInt(message['time']) > parseInt($('#chatWindow :last-child > span').html()))) {
     $('#chatWindow').append('<div class="poster">'+message['poster']+'</div><div class="message"><span>'+message['time']+'</span>'+message['message']+'</div>');
       }
       });
     }
     });

Without the $.each function I am able to successfully parse single JSON objects, but not an array. This is my first outing with JSON and $.each, and I'm pretty new to jQuery, so go easy if my code has ugly bits!

This question is related to jquery arrays json each

The answer is


No, with eval is not safe, you can use JSON parser that is much safer: var myObject = JSON.parse(data); For this use the lib https://github.com/douglascrockford/JSON-js


You can download a JSON parser from a link on the JSON.org website which works great, you can also stringify you JSON to view the contents.

Also, if you're using EVAL and it's a JSON array then you'll need to use the following synrax:

eval('([' + jsonData + '])');


You can use the Javascript eval() function to parse the JSON for you. See the JSON website for a better explanation, but you should be able to change your success function to...

var returnedObjects = eval(data);
var i = 0;
for (i = 0; i < returnedObjects.length; i++){
    console.log('Time: ' + returnedObjects[i].time);
}

...or something close.


Careful with the eval, the JSON specs http://json.org/js.html recommend something like

var myObject = eval('(' + myJSONtext + ')');

And there may be some more gotchas. There is a plugin for jQuery that will take care of it, i guess:

http://code.google.com/p/jquery-json/


Using .NET 3.5 FIX

All of you are slightly wrong, but the combination of all of your efforts has paid off!

Instead of eval('([' + jsonData + '])'); do

success: function(msg){
var data = eval(msg.d);
var i=0;
for(i=0;i<data.length;i++){
    data[i].parametername /// do whatever you want here.
};

I don't know anything about the whole "don't use eval," but what I do know is that by doing the '([' + msg + '])' you are nesting those objects deeper, instead of up a level.


jQuery.parseJSON - new in jQuery 1.4.1


I know this is pretty long after your post, but wanted to post for others who might be experiencing this issue and stumble across this post as I did.

It seems there's something about jquery's $.each that changes the nature of the elements in the array.

I wanted to do the following:

$.getJSON('/ajax/get_messages.php', function(data) {

    /* data: 

    [{"title":"Failure","details":"Unsuccessful. Please try again.","type":"error"},
    {"title":"Information Message","details":"A basic informational message - Please be aware","type":"info"}]

    */

    console.log ("Data0Title: " + data[0].title);
    // prints "Data0Title: Failure"

    console.log ("Data0Type: " + data[0].type);
    // prints "Data0Type: error"

    console.log ("Data0Details: " + data[0].details);
    // prints "Data0Details: Unsuccessful. Please try again"


    /* Loop through data array and print messages to console */

});

To accomplish the loop, I first tried using a jquery $.each to loop through the data array. However, as the OP notes, this doesn't work right:

$.each(data, function(nextMsg) {    
    console.log (nextMsg.title + " (" + nextMsg.type + "): " + nextMsg.details);
    // prints 
    // "undefined (undefined): undefined
    // "undefined (undefined): undefined
});

This didn't exactly make sense since I am able to access the data[0] elements when using a numeric key on the data array. So since using a numerical index worked, I tried (successfully) replacing the $.each block with a for loop:

var i=0;
for (i=0;i<data.length;i++){
    console.log (data[i].title + " (" + data[i].type + "): " + data[i].details);
    // prints
    // "Failure (error): Unsuccessful. Please try again"
    // "Information Message (info): A basic informational message - Please be aware"
}

So I don't know the underlying problem, a basic, old fashioned javascript for loop seems to be a functional alternative to jquery's $.each


Your data is a string of '[{}]' at that point in time, you can eval it like so:

function(data) {
    data = eval( '(' + data + ')' )
}

However this method is far from secure, this will be a bit more work but the best practice is to parse it with Crockford's JSON parser: https://github.com/douglascrockford/JSON-js

Another method would be $.getJSON and you'll need to set the dataType to json for a pure jQuery reliant method.


I am trying to parse JSON data returned from an ajax call, and the following is working for me:

Sample PHP code

$portfolio_array= Array('desc'=>'This is test description1','item1'=>'1.jpg','item2'=>'2.jpg');

echo json_encode($portfolio_array);

And in the .js, i am parsing like this:

var req=$.post("json.php", { id: "" + id + ""},
function(data) {
    data=$.parseJSON(data);
    alert(data.desc);
    $.each(data, function(i,item){
    alert(item);
    });
})
.success(function(){})
.error(function(){alert('There was problem loading portfolio details.');})
.complete(function(){});

If you have multidimensional array like below

$portfolio_array= Array('desc'=>'This is test description 1','items'=> array('item1'=>'1.jpg','item2'=>'2.jpg'));
echo json_encode($portfolio_array);

Then the code below should work:

var req=$.post("json.php", { id: "" + id + 
    function(data) {
    data=$.parseJSON(data);
    alert(data.desc);
    $.each(data.items, function(i,item){
    alert(item);
    });
})
.success(function(){})
.error(function(){alert('There was problem loading portfolio details.');})
.complete(function(){});

Please note the sub array key here is items, and suppose if you have xyz then in place of data.items use data.xyz


Do NOT eval. use a real parser, i.e., from json.org


Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to arrays

PHP array value passes to next row Use NSInteger as array index How do I show a message in the foreach loop? Objects are not valid as a React child. If you meant to render a collection of children, use an array instead Iterating over arrays in Python 3 Best way to "push" into C# array Sort Array of object by object field in Angular 6 Checking for duplicate strings in JavaScript array what does numpy ndarray shape do? How to round a numpy array?

Examples related to json

Use NSInteger as array index Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) HTTP POST with Json on Body - Flutter/Dart Importing json file in TypeScript json.decoder.JSONDecodeError: Extra data: line 2 column 1 (char 190) Angular 5 Service to read local .json file How to import JSON File into a TypeScript file? Use Async/Await with Axios in React.js Uncaught SyntaxError: Unexpected token u in JSON at position 0 how to remove json object key and value.?

Examples related to each

jQuery animated number counter from zero to value How to iterate over array of objects in Handlebars? Excel VBA For Each Worksheet Loop jQuery looping .each() JSON key/value not working jQuery '.each' and attaching '.click' event How to use continue in jQuery each() loop? jQuery .each() with input elements C++ for each, pulling from vector elements jQuery each loop in table row Get href attribute on jQuery