Sometimes you need data available to your scripts on the front end that you can normally only get from the server side of WordPress. Fortunately WordPress provides a relatively simple way to do this.
The handle for the enqueued or registered script we want the data to be available to.
The data to pass to the script, this could simply be a string, or an associative array.
So passing a simple associative array would look something like this:
wp_localize_script('theme/js', 'dataObject', array( 'data' => 'Hello world!' ) );
From within the theme/js script the data could then be accessed with the following.
console.log(dataObject.data); // Would log 'Hello world!'
wp_localize_script()must be called after the script it’s passing data to has been registered using