Using wp_localize_script to get data from cpt and pass it to maplace-js locations

Question

I'm currently building an Dealerlocator with ACF and CPT.

For the dealerlocator to shop the dealers on the map I want to use MAPlace-JS. This works fine when adding an array to the locations variable manually.

When passing data from my CPT it throws me an error:

Uncaught TypeError: Cannot assign to read only property '0' of string.

This is the JSON array which is passed:

    [{
    "lat":"52.5164364",
    "lng":"6.073328800000013",
    "title":"Company Name",
    "zoom":8, 
    "icon":"http:\/\/www.google.com\/mapfiles\/markerA.png"
    },{
    "lat":"53.3354151",
    "lng":"6.5032264999999825",
    "title":"Company Name 2",
    "zoom":8,
    "icon":"http:\/\/www.google.com\/mapfiles\/markerA.png"
    }]

This is passed via the following script:

add_action('wp_enqueue_scripts', function() {

  global $post;
  $args = array(
    'post_type' => 'dealers'
  );

  $mapposts = get_posts($args);
  $location_array = array();

  foreach($mapposts as $mappost) : setup_postdata($mappost);

    $location = get_field('maps_location', $mappost->ID);
    $location_array[] = array(
      'lat' => $location['lat'],
      'lng' => $location['lng'],
            'title' => get_the_title($mappost->ID),
            'zoom' => 8,
            'icon' => 'http://www.google.com/mapfiles/markerA.png'
    );

    $location_json = json_encode($location_array);

    wp_localize_script('sage/main.js', 'locationJSON', $location_json);

  endforeach;


}, 110);

And on the JS file called like this:

console.log(locationJSON);
new Maplace({
  // eslint-disable-next-line no-undef
  locations: locationJSON,
  controls_type: 'list',
  controls_on_map: false,
}).Load();

On the console.log it shows the JSON as above, so the code is passed ok.

But the code is not working within the Maps script, this is the error below.

Uncaught TypeError: Cannot assign to read only property '0' of string '[{"lat":"52.5164364","lng":"6.073328800000013","title":"Company Name","zoom":8,"icon":"http:\/\/www.google.com\/mapfiles\/markerA.png"},{"lat":"53.3354151","lng":"6.5032264999999825","title":"Company Name 2","zoom":8,"icon":"http:\/\/www.google.com\/mapfiles\/markerA.png"}]'
    at b._init (maplace.min.js:12)
    at b.Load (maplace.min.js:12)
    at Object.init (common.js:15)
    at Router.fire (Router.js:30)
    at Router.loadEvents (Router.js:45)
    at HTMLDocument.<anonymous> (main.js:25)
    at i (jquery-1.12.4.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2)
    at Function.ready (jquery-1.12.4.min.js:2)
    at HTMLDocument.K (jquery-1.12.4.min.js:2)
b._init @ maplace.min.js:12
b.Load @ maplace.min.js:12
init @ common.js:15
fire @ Router.js:30
loadEvents @ Router.js:45
(anonymous) @ main.js:25
i @ jquery-1.12.4.min.js:2
fireWith @ jquery-1.12.4.min.js:2
ready @ jquery-1.12.4.min.js:2
K @ jquery-1.12.4.min.js:2

I'm searching for this for hours now, but I'm not able to solve this thing.

Any ideas?

Answer 1

You don't need to use json_encode() when using wp_localize_script(). The last argument of wp_localize_script() should be a PHP array. This will be converted to JSON for you.

So to resolve the issue, remove this line:

$location_json = json_encode($location_array);

And change wp_localize_script() to use $location_array:

wp_localize_script('sage/main.js', 'locationJSON', $location_array);

Because $location_array had been double-encoded the locationJSON variable was actually just a text string that looked like JSON. So when the Maplace script tried to access the first element of the array with locationJSON[0] it failed because the locationJSON variable was not actually an Array.