Question

How can I access a JSON array from a PHP variable in an external JavaScript file without creating a global variable?

I have a PHP variable $customers that contains a json_encoded array:

$customers = [{"id":"12","name":"Abe Adams"},{"id":"17","name":"Bill Brown"}]

I want to use the contents of the array in a jQuery UI Autocomplete text input.

Rather than make an Ajax request for the autocomplete options, I’d prefer to use the values in the $customers array, which is passed in and ready to go when the user arrives at the page.

I know I can pass the contents of $customers to a JavaScript variable prior to loading the external JavaScript file:

<script>var customers = <?php echo $customers; ?></script>
<script src="external.js"></script>

But this requires creating a global JavaScript variable.

Is there a better way to access the $customers array from my external JS file?

---

This question has been asked several times previously:

Question: Access PHP var from external javascript file
Accepted Answer: Create global var

Question: Pass vars from php to js without ajax
Top Answer: Use Ajax

Question: php file send variable to .js external file
Top Answer: Use Ajax

Question: Reading a PHP file variables from external JS
Top Answer: Use eval

Question: Return JSON data from PHP, and use it using Javascript
Accepted Answer: Create global var

Answer 1

You could also use a requirejs “pattern”:

external.js:

define([], {
    init: function (customerData) {
        ... all your setup
    }
});

On page:

require(['external'], function (externalSetupFile) {
    var customers = <?php echo $customers?>;
    externalSetupFile.init(customers);
});

A big benefit to (in general) having some sort of “init” method that fires off the enhancement of the site is that you can do things like this. For example:

Application = {
   init: function (bootstrapData) {
       UserModel.create(bootstrapData.userModelData); //for example 
       this.config = bootstrapData;
       this.setupUI();
   },
   setupUI: function () {
      //setup autocomplete and the like
      $("#someEl").autocomplete(this.config.customers);
   }
}

An even better part of this is that you can split up what you’re doing into small sections, which makes testing and debugging a heck of a lot easier.