Best method for converting a PHP array to javascript

Question

I am passing a PHP array to a javascript function. The only way I know to do this is to create a js array from the PHP array and pass that to the js function. But this creates a huge chunk of code to transfer (see code below - there's a lot more but I'm sure you get the general idea). I suspect that there is a more efficient method. Would anyone care to share it with me? Thanks!

   <script type="text/javascript">
    jsInit("http://railsacrosseurope.com/public",
           "http://railsacrosseurope.com",
           "85572859349");var routeCount = [75];
    var train = [75];
      train[1] = [];
      train[1][0] = [];
      train[1][0]['player_num'] = 5;
      train[1][0]['line'] = 'RED';
      train[1][0]['track_unit'] = 0;
      train[1][0]['direction'] = '_';
      train[1][0]['dest_city'] = 43;
      train[1][0]['status'] = 'ARRIVED';
      train[1][0]['route_id'] = 1;
      train[1][0]['goods'] = [];
      routeCount[1] = [];
      routeCount[1]['route_id'] = 1;
      routeCount[1]['count'] = drawTrack(68, 658, 149, 568, '#888', train[1]);
      train[2] = [];
      routeCount[2] = [];
      routeCount[2]['route_id'] = 2;
      routeCount[2]['count'] = drawTrack(10, 571, 149, 568, '#888', train[2]);
      train[3] = [];
      routeCount[3] = [];
      routeCount[3]['route_id'] = 3;
      routeCount[3]['count'] = drawTrack(53, 510, 149, 568, '#888', train[3]);
      train[4] = [];
      routeCount[4] = [];
      routeCount[4]['route_id'] = 4;
      routeCount[4]['count'] = drawTrack(149, 568, 202, 495, '#888', train[4]);
      train[5] = [];
      train[5][0] = [];
      train[5][0]['player_num'] = 4;
      train[5][0]['line'] = 'RED';
      train[5][0]['track_unit'] = 2;
      train[5][0]['direction'] = '_';
      train[5][0]['dest_city'] = 56;
      train[5][0]['status'] = 'ENROUTE';
      train[5][0]['route_id'] = 5;
      train[5][0]['goods'] = [];
      routeCount[5] = [];
      routeCount[5]['route_id'] = 5;
      routeCount[5]['count'] = drawTrack(149, 568, 217, 605, '#888', train[5]);
      train[6] = [];
      routeCount[6] = [];
      routeCount[6]['route_id'] = 6;
      routeCount[6]['count'] = drawTrack(217, 605, 282, 572, '#888', train[6]);
      train[7] = [];
      routeCount[7] = [];
      routeCount[7]['route_id'] = 7;
      routeCount[7]['count'] = drawTrack(202, 495, 250, 448, '#888', train[7]);
      train[8] = [];
      routeCount[8] = [];
      routeCount[8]['route_id'] = 8;
      routeCount[8]['count'] = drawTrack(282, 572, 293, 504, '#888', train[8]);
      train[9] = [];
      routeCount[9] = [];
      routeCount[9]['route_id'] = 9;
      routeCount[9]['count'] = drawTrack(293, 504, 250, 448, '#888', train[9]);
      train[10] = [];
      routeCount[10] = [];
      routeCount[10]['route_id'] = 10;
      routeCount[10]['count'] = drawTrack(250, 448, 370, 450, '#888', train[10]);
      train[11] = [];
      routeCount[11] = [];
      routeCount[11]['route_id'] = 11;
      routeCount[11]['count'] = drawTrack(293, 504, 373, 530, '#888', train[11]);
      train[12] = [];
      routeCount[12] = [];
      routeCount[12]['route_id'] = 12;
      routeCount[12]['count'] = drawTrack(250, 448, 250, 372, '#888', train[12]);
      train[13] = [];
      routeCount[13] = [];
      routeCount[13]['route_id'] = 13;
      routeCount[13]['count'] = drawTrack(373, 530, 431, 479, '#888', train[13]);
      train[14] = [];
      routeCount[14] = [];
      routeCount[14]['route_id'] = 14;
      routeCount[14]['count'] = drawTrack(373, 530, 370, 450, '#888', train[14]);
      train[15] = [];
      routeCount[15] = [];
      routeCount[15]['route_id'] = 15;
      routeCount[15]['count'] = drawTrack(431, 479, 466, 479, '#888', train[15]);
      train[16] = [];
      routeCount[16] = [];
      routeCount[16]['route_id'] = 16;
      routeCount[16]['count'] = drawTrack(466, 479, 527, 484, '#888', train[16]);
      train[17] = [];
      routeCount[17] = [];
      routeCount[17]['route_id'] = 17;
      routeCount[17]['count'] = drawTrack(527, 484, 511, 521, '#888', train[17]);
      train[18] = [];
      train[18][0] = [];
      train[18][0]['player_num'] = 2;
      train[18][0]['line'] = 'RED';
      train[18][0]['track_unit'] = 3;
      train[18][0]['direction'] = '_';
      train[18][0]['dest_city'] = 17;
      train[18][0]['status'] = 'ENROUTE';
      train[18][0]['route_id'] = 18;
      train[18][0]['goods'] = [];
      train[18][0]['goods'][0] = [];
      train[18][0]['goods'][0]['name'] = 'Furniture';
      train[18][0]['goods'][0]['goods_id'] = 31;
      train[18][0]['goods'][1] = [];
      train[18][0]['goods'][1]['name'] = 'Chocolate';
      train[18][0]['goods'][1]['goods_id'] = 7;
      routeCount[18] = [];
      routeCount[18]['route_id'] = 18;
      routeCount[18]['count'] = drawTrack(511, 521, 527, 598, '#888', train[18]);
      train[19] = [];
      routeCount[19] = [];
      routeCount[19]['route_id'] = 19;
      routeCount[19]['count'] = drawTrack(527, 598, 584, 650, '#888', train[19]);
      train[20] = [];
      routeCount[20] = [];
      routeCount[20]['route_id'] = 20;
      routeCount[20]['count'] = drawTrack(466, 479, 432, 430, '#888', train[20]);
      train[21] = [];
      routeCount[21] = [];
      routeCount[21]['route_id'] = 21;
      routeCount[21]['count'] = drawTrack(466, 479, 462, 430, '#888', train[21]);
      train[22] = [];
      routeCount[22] = [];
      routeCount[22]['route_id'] = 22;
      routeCount[22]['count'] = drawTrack(370, 450, 344, 350, '#888', train[22]);
      train[23] = [];
      routeCount[23] = [];
      routeCount[23]['route_id'] = 23;
      routeCount[23]['count'] = drawTrack(250, 372, 344, 350, '#888', train[23]);
      train[24] = [];
      routeCount[24] = [];
      routeCount[24]['route_id'] = 24;
      routeCount[24]['count'] = drawTrack(344, 350, 314, 260, '#888', train[24]);
      train[25] = [];
      routeCount[25] = [];
      routeCount[25]['route_id'] = 25;
      routeCount[25]['count'] = drawTrack(344, 350, 395, 299, '#888', train[25]);
      train[26] = [];
      routeCount[26] = [];
      routeCount[26]['route_id'] = 26;
      routeCount[26]['count'] = drawTrack(395, 299, 400, 290, '#888', train[26]);
      train[27] = [];
      routeCount[27] = [];
      routeCount[27]['route_id'] = 27;
      routeCount[27]['count'] = drawTrack(400, 290, 412, 255, '#888', train[27]);
      train[28] = [];
      routeCount[28] = [];
      routeCount[28]['route_id'] = 28;
      routeCount[28]['count'] = drawTrack(412, 255, 314, 260, '#888', train[28]);
      train[29] = [];
      routeCount[29] = [];
      routeCount[29]['route_id'] = 29;
      routeCount[29]['count'] = drawTrack(314, 260, 257, 232, '#888', train[29]);
      train[30] = [];
      train[30][0] = [];
      train[30][0]['player_num'] = 3;
      train[30][0]['line'] = 'RED';
      train[30][0]['track_unit'] = 2;
      train[30][0]['direction'] = '_';
      train[30][0]['dest_city'] = 29;
      train[30][0]['status'] = 'ENROUTE';
      train[30][0]['route_id'] = 30;
      train[30][0]['goods'] = [];
      train[30][0]['goods'][0] = [];
      train[30][0]['goods'][0]['name'] = 'Marble';
      train[30][0]['goods'][0]['goods_id'] = 19;
      routeCount[30] = [];
      routeCount[30]['route_id'] = 30;
      routeCount[30]['count'] = drawTrack(314, 260, 300, 209, '#888', train[30]);
      train[31] = [];
      routeCount[31] = [];
      routeCount[31]['route_id'] = 31;
      routeCount[31]['count'] = drawTrack(300, 209, 308, 192, '#888', train[31]);
      train[32] = [];
      routeCount[32] = [];
      routeCount[32]['route_id'] = 32;
      routeCount[32]['count'] = drawTrack(308, 192, 225, 170, '#888', train[32]);
      train[33] = [];
      routeCount[33] = [];
      routeCount[33]['route_id'] = 33;
      routeCount[33]['count'] = drawTrack(225, 170, 166, 195, '#888', train[33]);
      train[34] = [];
      routeCount[34] = [];
      routeCount[34]['route_id'] = 34;
      routeCount[34]['count'] = drawTrack(308, 192, 315, 155, '#555', train[34]);
      train[35] = [];
      routeCount[35] = [];
      routeCount[35]['route_id'] = 35;
      routeCount[35]['count'] = drawTrack(315, 155, 285, 101, '#888', train[35]);
      train[36] = [];
      routeCount[36] = [];
      routeCount[36]['route_id'] = 36;
      routeCount[36]['count'] = drawTrack(285, 101, 330, 70, '#888', train[36]);
      train[37] = [];
      routeCount[37] = [];
      routeCount[37]['route_id'] = 37;
      routeCount[37]['count'] = drawTrack(285, 101, 243, 131, '#888', train[37]);
      train[38] = [];
      routeCount[38] = [];
      routeCount[38]['route_id'] = 38;
      routeCount[38]['count'] = drawTrack(412, 255, 461, 304, '#555', train[38]);
      train[39] = [];
      routeCount[39] = [];
      routeCount[39]['route_id'] = 39;
      routeCount[39]['count'] = drawTrack(461, 304, 499, 350, '#555', train[39]);
      train[40] = [];
      routeCount[40] = [];
      routeCount[40]['route_id'] = 40;
      routeCount[40]['count'] = drawTrack(499, 350, 504, 370, '#888', train[40]);
      train[41] = [];
      routeCount[41] = [];
      routeCount[41]['route_id'] = 41;
      routeCount[41]['count'] = drawTrack(504, 370, 462, 430, '#888', train[41]);
      train[42] = [];
      routeCount[42] = [];
      routeCount[42]['route_id'] = 42;
      routeCount[42]['count'] = drawTrack(462, 430, 532, 400, '#888', train[42]);
      train[43] = [];
      routeCount[43] = [];
      routeCount[43]['route_id'] = 43;
      routeCount[43]['count'] = drawTrack(532, 400, 623, 408, '#888', train[43]);
      train[44] = [];
      routeCount[44] = [];
      routeCount[44]['route_id'] = 44;
      routeCount[44]['count'] = drawTrack(461, 304, 554, 300, '#555', train[44]);
      train[45] = [];
      routeCount[45] = [];
      routeCount[45]['route_id'] = 45;
      routeCount[45]['count'] = drawTrack(554, 300, 573, 270, '#888', train[45]);
      train[46] = [];
      routeCount[46] = [];
      routeCount[46]['route_id'] = 46;
      routeCount[46]['count'] = drawTrack(554, 300, 585, 350, '#888', train[46]);
      train[47] = [];
      routeCount[47] = [];
      routeCount[47]['route_id'] = 47;
      routeCount[47]['count'] = drawTrack(585, 350, 623, 408, '#888', train[47]);
      train[48] = [];
      routeCount[48] = [];
      routeCount[48]['route_id'] = 48;
      routeCount[48]['count'] = drawTrack(527, 484, 610, 470, '#888', train[48]);
      train[49] = [];
      routeCount[49] = [];
      routeCount[49]['route_id'] = 49;
      routeCount[49]['count'] = drawTrack(610, 470, 623, 408, '#888', train[49]);
      train[50] = [];
      routeCount[50] = [];
      routeCount[50]['route_id'] = 50;
      routeCount[50]['count'] = drawTrack(610, 470, 659, 540, '#888', train[50]);
      train[51] = [];
      routeCount[51] = [];
      routeCount[51]['route_id'] = 51;
      routeCount[51]['count'] = drawTrack(659, 540, 705, 510, '#888', train[51]);
      train[52] = [];
      routeCount[52] = [];
      routeCount[52]['route_id'] = 52;
      routeCount[52]['count'] = drawTrack(705, 510, 610, 470, '#555', train[52]);
      train[53] = [];
      routeCount[53] = [];
      routeCount[53]['route_id'] = 53;
      routeCount[53]['count'] = drawTrack(705, 510, 673, 433, '#888', train[53]);
      train[54] = [];
      routeCount[54] = [];
      routeCount[54]['route_id'] = 54;
      routeCount[54]['count'] = drawTrack(610, 470, 673, 433, '#888', train[54]);
      train[55] = [];
      routeCount[55] = [];
      routeCount[55]['route_id'] = 55;
      routeCount[55]['count'] = drawTrack(673, 433, 623, 408, '#888', train[55]);
      train[56] = [];
      routeCount[56] = [];
      routeCount[56]['route_id'] = 56;
      routeCount[56]['count'] = drawTrack(623, 408, 693, 338, '#888', train[56]);
      train[57] = [];
      routeCount[57] = [];
      routeCount[57]['route_id'] = 57;
      routeCount[57]['count'] = drawTrack(693, 338, 675, 298, '#888', train[57]);
      train[58] = [];
      routeCount[58] = [];
      routeCount[58]['route_id'] = 58;
      routeCount[58]['count'] = drawTrack(675, 298, 710, 282, '#888', train[58]);
      train[59] = [];
      routeCount[59] = [];
      routeCount[59]['route_id'] = 59;
      routeCount[59]['count'] = drawTrack(710, 282, 699, 210, '#888', train[59]);
      train[60] = [];
      routeCount[60] = [];
      routeCount[60]['route_id'] = 60;
      routeCount[60]['count'] = drawTrack(585, 350, 639, 314, '#888', train[60]);
      train[61] = [];
      routeCount[61] = [];
      routeCount[61]['route_id'] = 61;
      routeCount[61]['count'] = drawTrack(639, 314, 675, 298, '#888', train[61]);
      train[62] = [];
      routeCount[62] = [];
      routeCount[62]['route_id'] = 62;
      routeCount[62]['count'] = drawTrack(461, 304, 490, 232, '#555', train[62]);
      train[63] = [];
      routeCount[63] = [];
      routeCount[63]['route_id'] = 63;
      routeCount[63]['count'] = drawTrack(490, 232, 513, 230, '#555', train[63]);
      train[64] = [];
      routeCount[64] = [];
      routeCount[64]['route_id'] = 64;
      routeCount[64]['count'] = drawTrack(573, 270, 513, 230, '#555', train[64]);
      train[65] = [];
      routeCount[65] = [];
      routeCount[65]['route_id'] = 65;
      routeCount[65]['count'] = drawTrack(573, 270, 596, 240, '#888', train[65]);
      train[66] = [];
      routeCount[66] = [];
      routeCount[66]['route_id'] = 66;
      routeCount[66]['count'] = drawTrack(596, 240, 560, 170, '#888', train[66]);
      train[67] = [];
      train[67][0] = [];
      train[67][0]['player_num'] = 1;
      train[67][0]['line'] = 'RED';
      train[67][0]['track_unit'] = 8;
      train[67][0]['direction'] = '+';
      train[67][0]['dest_city'] = 3;
      train[67][0]['status'] = 'ARRIVED';
      train[67][0]['route_id'] = 67;
      train[67][0]['goods'] = [];
      train[67][0]['goods'][0] = [];
      train[67][0]['goods'][0]['name'] = 'Timber';
      train[67][0]['goods'][0]['goods_id'] = 29;
      routeCount[67] = [];
      routeCount[67]['route_id'] = 67;
      routeCount[67]['count'] = drawTrack(513, 230, 528, 150, '#555', train[67]);
      train[68] = [];
      routeCount[68] = [];
      routeCount[68]['route_id'] = 68;
      routeCount[68]['count'] = drawTrack(528, 150, 560, 170, '#888', train[68]);
      train[69] = [];
      routeCount[69] = [];
      routeCount[69]['route_id'] = 69;
      routeCount[69]['count'] = drawTrack(560, 170, 567, 112, '#888', train[69]);
      train[70] = [];
      routeCount[70] = [];
      routeCount[70]['route_id'] = 70;
      routeCount[70]['count'] = drawTrack(567, 112, 553, 38, '#555', train[70]);
      train[71] = [];
      routeCount[71] = [];
      routeCount[71]['route_id'] = 71;
      routeCount[71]['count'] = drawTrack(560, 170, 661, 61, '#888', train[71]);
      train[72] = [];
      routeCount[72] = [];
      routeCount[72]['route_id'] = 72;
      routeCount[72]['count'] = drawTrack(553, 38, 661, 61, '#555', train[72]);
      train[73] = [];
      routeCount[73] = [];
      routeCount[73]['route_id'] = 73;
      routeCount[73]['count'] = drawTrack(344, 350, 425, 340, '#888', train[73]);
      train[74] = [];
      routeCount[74] = [];
      routeCount[74]['route_id'] = 74;
      routeCount[74]['count'] = drawTrack(425, 340, 461, 304, '#888', train[74]);
      train[75] = [];
      routeCount[75] = [];
      routeCount[75]['route_id'] = 75;
      routeCount[75]['count'] = drawTrack(425, 340, 499, 350, '#555', train[75]);
    </script>

Answer 1

You can always use XMLHttpRequest to load it as JSON or XML.

Answer 2

json_encode. See http://us3.php.net/manual/en/function.json-encode.php

Answer 3

A more space-efficient way of encoding Javascript data structures is called JSON.

As of PHP 5.2.0, you can use the following function to spit out some JSON: json_encode().

Answer 4

Use JSON. see why JSON over XML: http://thephpcode.blogspot.com/2008/08/why-json-over-xml-in-ajax.html

To use json in PHP simply:

<?php

  echo '<script type="text/javascript">/* <![CDATA[ */';
  echo 'var train = '.json_encode($array);
  echo '/* ]]> */</script>';

?>

the variable train in Javascript will be an object containing properties and arrays based on your PHP variable $array.

To parse or iterate through the train object, you can use for ... in statements for JSON arrays, and directly use object.property for JSON objects.

See this:

<?php

  $array = array(array('id'=>3,'title'=>'Great2'),array('id'=>5,'title'=>'Great'),array('id'=>1,'title'=>'Great3'))
  echo '<script type="text/javascript">/* <![CDATA[ */';
  echo 'var train = '.json_encode($array);
  echo '/* ]]> */</script>';

?>

The output will be:

 var train = [{id:3,title:'Great2'},{id:5,title:'Great'},{id:1,title:'Great3'}];

the variable train becomes an array of objects. [] squrare brackets are arrays, holding more arrays or objects. {} curly braces are objects, they have properties to them.

So to iterate the train variable:

<script type="text/javascript">

  var train = [{id:3,title:'Great2'},{id:5,title:'Great'},{id:1,title:'Great3'}];

  for(i in train){
    var t = train[i]; // get the current element of the Array
    alert(t.id); // gets the ID
    alert(t.title); // gets the title
  }

</script>

Simple! Hope that really helps.

Answer 5

Mauris:

I tried to add this as a comment to your post, but it was too long. I have included some sample JSON data here. How would I iterate over this JSON object? Thanks again!

var trainData = [{"id":"2","type":"STANDARD","game_player_id":"2","game_id":"1","route_id":"18","origin_city_id":"58","dest_city_id":"17","track_unit":"3","direction":"_","line":"RED","status":"ENROUTE","goods":[{"train_id":"2","goods_id":"31","name":"Furniture"},{"train_id":"2","goods_id":"7","name":"Chocolate"}]},{"id":"3","type":"STANDARD","game_player_id":"3","game_id":"1","route_id":"30","origin_city_id":"9","dest_city_id":"29","track_unit":"2","direction":"_","line":"RED","status":"ENROUTE","goods":[{"train_id":"3","goods_id":"19","name":"Marble"}]},{"id":"4","type":"STANDARD","game_player_id":"4","game_id":"1","route_id":"5","origin_city_id":"49","dest_city_id":"56","track_unit":"2","direction":"_","line":"RED","status":"ENROUTE","goods":[]},{"id":"5","type":"STANDARD","game_player_id":"5","game_id":"1","route_id":"1","origin_city_id":"56","dest_city_id":"43","track_unit":"0","direction":"_","line":"RED","status":"ARRIVED","goods":[]},{"id":"15","type":"STANDARD","game_player_id":"1","game_id":"1","route_id":"67","origin_city_id":"21","dest_city_id":"3","track_unit":"8","direction":"+","line":"RED","status":"ARRIVED","goods":[{"train_id":"15","goods_id":"29","name":"Timber"}]}];