My Blog

Pass Objects and Arrays Between JavaScript and PHP with JSON

Posted by chris on March 13th, 2008 in JavaScript and Ajax, Programming

In this article I gave a brief intro to using JSON to pass JavaScript arrays to PHP via Ajax. I’ve done a bit more with json since then and with the help of a co-worker discovered how to get javascript objects working together with php utilizing json.

Passing Multiple JavaScript objects to PHP

JavaScript class:

1 2 3 4 5 6

function product(id,name,price) { this.id=id; this.name=name; this.price=price; }

Above we just create a simple javascript class that we will call below.

Putting JavaScript objects into JavaScript array:

1 2	var object = new product('222','spectacular fizz','3.59') var productsArr[productsArr.length] = object;

We can now add as many of the these objects as we would like to the products array. So lets say we have an array that looks like this below…

1 2 3

productsArr[0] = object... productsArr[1] = object... productsArr[2] = object...

…and we want to pass it over to PHP. So we use the following code to turn it into a JSON string.

1	var productsJSON = JSON.stringify(productsArr);

Now we need to do an AJAX Post and on the PHP side we decode the JSON string (note you only need to stripcslashes if magic quotes its turned on):

1	$productsArr = $this->json->decode(stripcslashes($productsJSON));

Now we can reference these objects multiple ways. One if we are just continuously looping through we can use a foreach:

1 2 3 4 5 6

foreach($productsArr as $product) { echo $product->id; echo $product->name; echo $product->price; }

Or of course we can reference the object directly by its index in the array.

1	echo $productsArr[1]->name;

Pretty cool huh.

Related posts:

1. using JSON to pass JavaScript arrays to PHP via Ajax
2. More JavaScript Array Methods (push and join)
3. JavaScript forEach
4. php switch/case statements
5. Doing Math in JavaScript umm…sucks

Tags: ajax, javascript, php

This entry was posted on Thursday, March 13th, 2008 at 1:03 am and is filed under JavaScript and Ajax, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Pass Objects and Arrays Between JavaScript and PHP with JSON”

1. Adam says:

   January 30, 2012 at 4:14 pm

   Won’t work…unless you have left something out here. When you decode the Json in php it is a string. If you reference the 2nd array index (like you have done here) you will not get the name. you’ll get the 2nd letter or character in the STRING that was sent to the php application. rethink this…
2. chris says:

   January 30, 2012 at 4:27 pm

   I don’t appreciate you telling me to “rethink this”. It comes off very rude sounding and I think you hurt my pseudo codes feelings from 4 years back by doing so. Here is the fixed up version of this that works for me in Google Chrome. Note you made need to include the JSON script depending on the browser (see: http://www.json.org/). Also note that since this writing JSON support in PHP is included by default in newer versions (I think 5.2 and higher) so you can just call either json_encode() or json_decode() depending on what you’re doing. This blog was missing a link to a blog post that this one built on: http://blog.cnizz.com/2007/11/26/using-json-to-pass-javascript-arrays-to-php-via-ajax/ which included this missing information.

   function product(id,name,price)
   {
   this.id=id;
   this.name=name;
   this.price=price;
   }

   var productsArr = new Array();

   var object = new product(’222′,’spectacular fizz’,’3.59′);
   productsArr[productsArr.length] = object;
   var object = new product(’222′,’spectacular fizz’,’3.59′);
   productsArr[productsArr.length] = object;
   var object = new product(’222′,’spectacular fizz’,’3.59′);
   productsArr[productsArr.length] = object;

   var productsJSON = JSON.stringify(productsArr);
   //console.log(productsJSON);