WordPress 6.3 with datatables – cannot seem to pass json from php to javascript

This is because the response from MapBox’s API is a string, which is then passed to wp_json_encode.

e.g.

echo wp_json_encode( [ 'fs_tileset_data' =>  'this is already a JSON string' ] );

This is the cause of the problem, it’s not 5256 rows of unset data, it’s a double JSON encoded string that’s 5256 characters long, it’s the same as echo json_encode( json_encode( excerpt the inner json_encode is happening on MapBox’ server.

There are two solutions:

• decode the JSON from mapbox before returning it in fs_tilesets_get
• print it directly and don’t use wp_json_encode

The first is the best.

Other notes:

• using the CDNs for bootstrap etc will slow your site down, shared CDNs worked well for older browsers, but modern browsers use independent caches per domain to prevent cross-site tracking and improve security so it’s going to request it again anyway even if it’s already loaded on another site.
  • to make things worse, because they’re on a different server no http2 optimisations can occur so it can’t send the files alongside the HTML in the same compression stream, reducing performance
• fs_tileset_settings_admin_callback as a callback is pointless because it just calls another function. Best to remove it completely and use fs_tilesets_index_html as the callback instead
• caching! HTTP requests are one of the heaviest slowest things you can do, and if mapbox goes down for maintenance your settings page breaks! Store it in a transient with an hours timeout and the page will be significantly faster and more reliable
• error handling, there is nothing to handle errors, e.g. if their API changed, or your token expired, everything would stop working without explanation