pass object/JSON to wp_localize_script

The question:

I’ve got a working piece of javascript that contains an object literal.
But I need to localize it, and I’m ytrying to figure out how to rewrite it so that I can get wp_localize_script() to accet it, and output the correct format.

The non-localized (non dynamic) version looks like this:

var layoyt_config = {
    'header'        : 1 
,   'footer'        : 1
,   'ls'            : {'sb1':1}
,   'rs'            : {'sb1':1,'sb2':1}
,   'align'         : 'center'
};  

Now, to have those values generated by php (based on some wp_settings) I want to use wp_localize_script, so I can take it from there:

var layoyt_config = my_localized_data.layoyt_config;

And to get that data in to that object property I ‘thought’ I could do this, but obviously not:

$data = array(
    'layout_config' => {
        'header' : 1
    ,   'footer' : 1
    ,   'ls' : {'sb1': 1}
    ,    'rs' : {'sb1': 1,'sb2': 1}
    ,    'align' : 'center'
    }
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

As this will cause PHP parse error I’ve tried to rewrite the json to array syntax, as wp_localize_script will convert that back to object notation, but this also does not work for me:

$data = array(
    'layout_config' => array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
    )
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

And while this runs smoothly trhough the php parser, I do not get the expected output in my page source, as my_localized_data.layout_config becomes a String “Array”, here is the output:

<script type='text/javascript'>
    /* <![CDATA[ */
    var wpkit_localized_data = {
    layout_config: "Array"
    };
    /* ]]> */
</script>

So.. How can I do this (or do I just have to accept that I must ‘flatten’ my object into discrete vars like:

lc_header = '1';
ls_ls_sb1 = '1';
etc...

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Indeed, wp_localize_script() is simple, it just adds quotes around the values and escapes the content, expecting all of them to be strings.

However, there is the l10n_print_after key of the array, which will be printed without any interference at all. It can be used to execute arbitrary code after the strings are passed. You can use it to pass your extra data.

$data = array(
    'layout_config' => {
      'ls' : {'sb1': 1}
    }
);
$reshuffled_data = array(
    'l10n_print_after' => 'my_localized_data = ' . json_encode( $data ) . ';'
);
wp_localize_script('my-script-handle', 'my_localized_data', $reshuffled_data);

You will end up with code like this:

var my_localized_data = {}; // What is left of your array
my_localized_data = {'layout_config': {'ls': {'sb1': 1}}}; // From l10n_print_after

Method 2

Disclaimer – I am out of my depth on JS security stuff here.

First, to match your desired output you are off by nesting level. Object name goes as parameter in localize call (instead of array key):

$data = array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
);
wp_localize_script('my-script-handle', 'layout_config', $data);

But ls and rs are still broken because WP_Scripts->print_scripts_l10n() method doesn’t handle the case when variable is array.

Best I could come up with to fix that is following filter (as above – not sure how safe would be to use it in production, but to give general idea):

add_filter('js_escape','js_escape_nested', 10, 2);

function js_escape_nested($safe_text, $text) {

     if(is_array($text) )
         return str_replace( '"', "'", json_encode ($text) );

     return $safe_text;
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment