Pass large PHP array to Javascript

Question

I've got a legacy PHP application that uses dabbles of Javascript for specific things usually related to the user interface. I've run into a problem that I haven't found a solution for and I'm hoping someone here has an idea or advice.

The app provides me with a PHP array that looks like this. The data is read from a database. I have a limited ability to change the array structure. The array can get pretty large.

    array (size=19)
      3029 => 
        array (size=10)
          0 => string '3029' (length=4)
          'id' => string '3029' (length=4)
          1 => string 'Week 1' (length=6)
          'name' => string 'Week 1' (length=6)
          2 => string '3029' (length=4)
          'parent' => string '3029' (length=4)
          3 => string '16777216' (length=8)
          'order' => string '16777216' (length=8)
          'level' => int 0
          'code' => 
            array (size=4)
              0 => string '1' (length=1)
              1 => string '0' (length=1)
              2 => string '0' (length=1)
              3 => string '0' (length=1)
      3030 => 
        array (size=10)
          0 => string '3030' (length=4)
          'id' => string '3030' (length=4)
          1 => string 'W1T1' (length=4)
          'name' => string 'W1T1' (length=4)
          2 => string '3029' (length=4)
          'parent' => string '3029' (length=4)
          3 => string '16842752' (length=8)
          'order' => string '16842752' (length=8)
          'level' => int 1
          'code' => 
            array (size=4)
              0 => string '1' (length=1)
              1 => string '1' (length=1)
              2 => string '0' (length=1)
              3 => string '0' (length=1)
And so forth...

A Javascript function is triggered by an onChange event as shown below. (All the JS is in a separate file from the PHP if that matters.) The JS code needs to be able to read the PHP array, do some calculations, and then update other fields on the form. This has proven to be more difficult than I expected due to the client-side/server-side processing of the two languages. I've thought about passing the array as a parameter to the JS function, but that doesn't sound like a good idea since the array can be large. A pointer would be nice, but I don't know if that is even possible. I'm also a little concerned about how/if JS can handle the nested array. I don't have a lot of JS experience. Does it use keys like PHP or does it only use indexes?

    <select name="parent" class="text" onchange="getNextCode(document.detailFrm, <?php if ($obj->parent) {echo $obj->parent;} else {echo 0;}?>)">
        <option value='<?php echo $obj->id; ?>'><?php echo $AppUI->_('None'); ?></option>
        <?php echo $task_parent_options; ?>
    </select>

I haven't written the JS yet, so it just looks like this at the moment. As I said, this should read the array and update the display.

function getNextCode(form, parent) {
  //Read the array
  //Calculate next code values
  form.code0.value = code0;
  form.code1.value = code1;
  form.code2.value = code2;
  form.code3.value = code3;
}

I've searched the web high and low with no luck. The examples I've found are either doing something entirely different or are using a tiny array, which makes me question whether this is even possible. Either way I'm out of ideas. Thanks for any help you may provide.

Answer 1

You can use json_encode() to translate a PHP array to Javascript syntax.

<script>
var js_array = <?php echo json_encode($php_array); ?>
</script>

Then you can use the js_array variable in the rest of your client-side code.

But it might be better to use AJAX to look up the data in the database as needed, rather than dump the entire array into the script.