Alright! so this subject has been brought to my attention to write on.
There are many reasons why you will want your PHP arrays to be available at client side. One of the main reason for me is that I want to improve overall user experience when I load lot of data for the user and keep it at client side unless another server call is required. This makes application faster and responsive. But this is not the only use case why we may want PHP arrays on client side there are many others which is depends on what you are trying to achieve.
One simple answer my friend was seeking was whether it is was really possible to get a PHP array at client side. My answer was Yes! Not only can you bring that array to client side but also in a nice OOPS way using JSON.
If you want to know about JSON please visit http://www.json.org
Lets do this step by step.
First we will create a PHP page or in other words a PHP script as shown below. Save it as target.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// header is important. Even if you keep the default header i.e. text/html if may still work at client side but we will need to decode the output properly header("Content-type: text/javascript"); // Lets now define an array $about_chahals = array( array( "location" => "Melbourne", "working_as" => "Software Engg.", "age" => "33", "loves" => "Everything except Apple", "name" => "Jaspreet Chahal" ), array( "location" => "Adelaide", "working_as" => "I am still too young to work", "age" => "2", "loves" => "Everything eatable", "name" => "Yuvraaj Chahal" ) ); echo json_encode($about_chahals); |
Output of above echo will be
|
1 |
[{"location":"Melbourne","working_as":"Software Engg.","age":"33","loves":"Everything except Apple","name":"Jaspreet Chahal"},{"location":"Adelaide","working_as":"I am still too young to work","age":"2","loves":"Everything eatable","name":"Yuvraaj Chahal"}] |
Let’s see how we can get this array in ExtJS 4
Check this code snippet to see how we can get the above array using ExtJS
[geshi lang=”javascript” nums=”1″ target=”_self” ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Example</title> <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script> </head> <body> <script> Ext.Ajax.request({ url: 'target.php', success: function(response, opts) { var jsonobj = Ext.decode(response.responseText); console.dir(jsonobj); }, failure: function(response, opts) { console.log('somthing went wrong with this AJAX call' + response.status); } }); </script> </body> </html> |
Above code just outputs jsonobj to Chrome’s console that you can view by pressing CTRL+SHIFT+I and checking under console tab. For the sake of simplicity I’ve include a screenshot below
As you can see a well formed PHP array in our client side Javascript function. Well from here put your thinking cap on and do whatever you want to do with this data. I heard you asking me a question that how the hell do I even get those Object values. Alright! here is how you do it. So as you can see an Array is return which has two objects. We can access it the way we access an object. i.e. like this
var jass_location = obj[0].location;
// so we can access individual object by an index value. In our case 0 and 1 are index values representing two objects returned.
|
1 |
Let’s see how we can get this array using jQuery
Check this code snippet out
[geshi lang=”javascript” nums=”1″ target=”_self” ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <script> $.ajax({ url: 'target.php', dataType: 'json', success: function(dat){ console.dir(dat); } }); </script> </body> </html> |
If you run the above code snippet you will get exactly the same result as shown in the Picture above. You can access the data same way as I shown you before. But lets go a step further and create a HTML List from the data received from PHP
So change the above to look like this
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <ul id="fillthisul"></ul> <script> $.ajax({ url: 'target.php', dataType: 'json', success: function(data){ $.each(data, function(index, obj) { $('ul#fillthisul').append('<li><strong>' + obj.name+ '</strong> aged ' + obj.age+ ' lives in ' + obj.location + '</li>'); }); } }); </script> </body> </html> |
You will get a nice HTML list as show below
As you noticed that we used $.each in out jQuery funtion to iterate through the returned array. You can do the same with Ext.Array.each for Ext example above.
I hope I made any sense If not please feel free to ask a question.
Cheers,
Leave a Reply