How to convert multi-object associative JSON array into Javascript array

Question

Possible Duplicate:
How to parse JSON in JavaScript

I am pulling a multi-object associative array out of PHP. An example is below:

$displayArray[] = array("Name"=>"Joe", "Important"=>"1", "Group"=>"Family");
$displayArray[] = array("Name"=>"Jane", "Important"=>"0", "Group"=>"Family");
echo json_encode($displayArray);

Using AJAX, the returned JSON string is so:

[{"Name":"Joe","Important":"1","Group":"Family"},{"Name":"Jane","Important":"0","Group":"Family"}]

I would like to convert this JSON data into a Javascript array. Help appreciated.

You can use JSON.parse() to do so. Keep in mind that you may need to polyfill this for use in older browsers . — m90, Dec 14 '12 at 21:11
google it, http://stackoverflow.com/questions/3010840/loop-through-array-in-javascript — gion_13, Dec 14 '12 at 21:11
How are you getting this JSON string into your JavaScript page? — gen_Eric, Dec 14 '12 at 21:13
I use ajax to pull back "echo json_encode($displayArray);". I still don't see how I can loop thru the keys and values :( — Jeremy, Dec 14 '12 at 21:14
@Jeremy: Show us your AJAX code. You probably just need to add `JSON.parse()`. — gen_Eric, Dec 14 '12 at 21:15
Your question really appears to be how to pass data from the server (PHP) to client (JavaScript), and how to parse that data (and you've chosen to use JSON as the format). We need to see your AJAX to help with that. — ernie, Dec 14 '12 at 21:17
@Jeremy, are you opposed to using a library like jQuery? If not, this gets real simple. — Jonathan M, Dec 14 '12 at 21:20
@IHateLazy, for doing the whole AJAX call, including the JSON parsing. — Jonathan M, Dec 14 '12 at 21:22
Here is my AJAX: var myArray = $.ajax({ type: 'POST', url: 'ReadToggle.php', dataType:'json', async: false }).responseText; — Jeremy, Dec 14 '12 at 21:23
@Jeremy: If you're already using jQuery, then since you have `dataType:"json"`, it's already parsed if you access it in a callback... but you shouldn't be doing `async: false`. You should learn to use callbacks and deal with asynchronous code. — I Hate Lazy, Dec 14 '12 at 21:24
@Jeremy, yeah you're already using jQuery. In your `success:` segment just put a `function(myObject) { etc. etc. }` and the object will be in `myObject`. Don't use `async:false`. — Jonathan M, Dec 14 '12 at 21:25
Thanks Everyone. Ernie below sorted it. Thanks for your help. — Jeremy, Dec 14 '12 at 21:37

ernie · Accepted Answer · 2012-12-14T21:36:16.463

2

Looks like you're using jQuery. The return from .ajax() isn't the object you're echo back to the browser via PHP. Instead, you can access the returned data using the success callback, e.g.:

var myData;

$.ajax({ type: 'POST', 
       url: 'ReadToggle.php', 
       dataType:'json', 
       async: false })
       success: function(data) {
                    myData = data;
       }
})

You can then parse myData like a standard javascript object, e.g.:

myData[index]

I think most people tend to write their code to handle the returned object in the success function itself, e.g.:

var myData;

$.ajax({ type: 'POST', 
       url: 'ReadToggle.php', 
       dataType:'json', 
       async: false })
       success: function(data) {
                    console.log(data);
                    console.log(data[0]);
       }
})

edited Dec 14 '12 at 21:36

answered Dec 14 '12 at 21:26

ernie

6,356
23
28

Fantastic. Thanks Ernie. I looped so: for(var index in myData) { document.write( 'Name' + " : " + myData[index]['Name'] + "
"); document.write( 'Important' + " : " + myData[index]['Important'] + "
"); document.write( 'Group' + " : " + myData[index]['Group'] + "
"); } – Jeremy Dec 14 '12 at 21:36
@Jeremy glad to help. Like I said, most people put that into the actually success function, rather than using a separate var and code external to the .ajax() call. – ernie Dec 14 '12 at 21:37

How to convert multi-object associative JSON array into Javascript array

1 Answers1