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!
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:
jQuery.parseJSON - new in jQuery 1.4.1
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.
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.
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.
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
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
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
Do NOT eval. use a real parser, i.e., from json.org
Source: Stackoverflow.com