Best way to transfer an array between PHP and Javascript [duplicate]

So I have an array of records retreived from a database. The array is in the format;

$rows[0]['id']=1;
$rows[0]['title']='Abc';
$rows[0]['time_left']=200;


$rows[1]['id']=2;
$rows[1]['title']='XYZ';
$rows[1]['time_left']=300;
//And so on upto 10-20 rows

What's the best way of transferring this array over to my javascript code? I'd like the javascript to be able to loop through all of the records, and using the 'id' attribute, update the div with that id with some information.

My javascript code is in an external .js file, but i'm able to execute php code in the HTML code of my page. So I could do something like this:

In my_file.js:

var rows=New Array();

In HTML code:

<html>
<head>
<script type="text/javascript" src="js/my_file.js"></script>

<script type="text/javascript">
<? foreach ($rows as $row):?>
<? extract($row);?>
rows[<?=$id;?>]['title']="<?=$title;?>";
//And so on
<? endforeach;?>
</script>

Solution 1:

I tend to use a JSON object for this:

On the server side, JSON encode your data: json_encode($data);
On the JavaScript side, I write a function that takes a JSON object as a parameter and unpack it.

When you unpack the object, you can print the array's contents into a <DIV> tag, or where ever you would like on the page (jQuery does a pretty sweet job of this).

Solution 2:

If you're doing inline data, I've always been fond of doing

<script type="text/javascript">
window.sitescriptdata = {}; 
window.sitescriptdata.foo = ( <?php echo json_encode( $structure ); ?> );
</script>

For basic stuff, saves you doing an AJAX callback. Also, if you want to glue data to a DOM node, the "metaobject" way is something I really love.

<div id="foobar">
 <div><object class="metaobject">
        <param name="data" value="<?php echo htmlentities(json_encode($data), ENT_QUOTES );?>" />
 </object></div>
</div>

Now this may not look great, but its an effective way of associating data directly with a DOM node without needing to know the exact unique path to that node. Very handy if you have many many datasets that need to be attached to specific screen elements.

I usually use http://noteslog.com/metaobjects/ plugin for jQuery, but its so simple I have on occasion written it myself ( there was a time I couldn't find the plugin, but new how it worked )

When done, there will be

$("div#foobar > div").get().data.($yourarrayhere)

Visible to your code.

Solution 3:

To follow up to your question (and my reply, I ran out of space on the comment reply), here is a very simplified subset of the code I use:

Javascript AJAX handler in jQuery:

$.ajax({
   type: "POST",
   url: "BACKEND.php",
   timeout: 8000,
   data: "var1=" + myVar,
   dataType: "json",
   error: function(){
     $("#DIVID").html("<div class='error'>Error!</div>");
   },  
   success: function(jsonObj){
     $("#DIVID").html(jsonObj.mydata);
   }
 });


PHP Array:
$data['mydata'] = $myData;

Solution 4:

In an AJAX example like here you can solve this problem on this way:

.php file (ajax return function)

$myArray = array("object_id"=>1, "object_title"=>"Testobject");
return json_encode($myArray);

.js file (javascript function)

...
if(g_httpRequest.readyState == 4)
{
var jsonRes = JSON.parse(g_httpRequest.responseText);
alert(jsonRes.object_title)
}
...