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.

"large" is a relative term, JS should be able to handle pretty large datasets relatively easily. There are no pointers in JS. You can use an Object, which works more or less like an associative array in PHP var obj = { foo: "bar" }; console.log(obj.foo, 'or', obj['foo']);, you can use normal arrays as well [1, 2, 3]. Based on the data, it looks like you should json_encode() it and perform a lookup in the onChange event — Rob M.
– Rob M., Commented Apr 18, 2017 at 21:00
I don't have much time to read your question in whole but if this is AJAX related then just encode your array into JSON using json_encode($array);. — dokgu
– dokgu, Commented Apr 18, 2017 at 21:00
The examples I looked at were passing the array as arguments to the JS function. Since the array could potentially have many thousands of elements, this didn't seem like a good idea, using json or otherwise. — mckinnej
– mckinnej, Commented Apr 28, 2017 at 12:53

Barmar · Accepted Answer · 2017-04-18 21:01:47Z

7

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.

answered Apr 18, 2017 at 21:01

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mckinnej Over a year ago

From what I've read, AJAX seems to be the best solution, but I have no experience with it. I'm concerned about the LOE it will require to implement it. Would it be worth it for just this one instance?

Barmar Over a year ago

Learning about AJAX will pay big dividends in the future, even if it's overkill for this particular case.

Collectives™ on Stack Overflow

Pass large PHP array to Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related