PHP Var to External JS -- Without Global, Ajax, or Eval

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

No, you can't do that without making external.js be a dynamically generated. You can however improve your strategy a little. Instead of having a global named customers have a global object for attaching all your global variables too:

window.Globals = {};
Globals.customers = <?php echo $customers; ?>;
Globals.something_else = <?php echo $something_else; ?>

Don't name it Globals though. Name it something specific to your company or web app/site. This way you will greatly reduce the risk of conflicting variable names with any external scripts, since you only have one global variable you use, and it is named after something specific to your site.

Answer 2

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.