Dynamically Load Json Data Into Classic Editor

I will start with, I know nothing about JSON data, neither the Rest API.

I am trying to build my music store, and I leverage the flexibility of amplitude.js, my problem is that the library uses an object which contains a JSON representation of the audio files, an example of the JSON data

Now comes my question: Is there any way I can call the data representation directly from the editor or build a meta box than handles this kind of situation. For example, I will be able to add the details directly from the meta box - name, artists, etc

I am really lost, and I would be glad if someone could point me in the right direction, thanks

I’m not sure I’ve understood.
Is the problem passing dynamic data from PHP (plugin, theme…) to JS?

1 Like

Thanks for helping out.

The problem is a way to pass the JSON data from the meta box into a js file, the JSON data is supposed to be in a Js file, so I was wondering if there is a way to use the data in the meta box, and then pass it to the Js file.

An example on codepen, look at the js section https://codepen.io/521dimensions/pen/WWQwRw

Edit:
Is there a way I could fill those Json representation data from the metabox, and that would dynamically passes it to the JS file, u get the idea

If you are calling the JS from CP, wp_localize_scripts() does the trick.
It’s not all about localization, you can pass any kind of data to the javascript.
Let me know if it sounds right so I can explain more…

Yh, please explain more, thanks

Edit
an example of what I am trying to do

, instead of adding source file, Mp3, I’ll replace it with the object data, then that should link it to the JS file

1 Like

The function let’s you pass an array (of whatever you want to the Javascript).
Sample code from a plugin I’m working on:
PHP:

// here I register (non enqueue) my script
wp_register_script( 'xsx_debug_js', plugins_url( 'js/xsx-debug.js', __FILE__ ) );
// then I populate the array with dynamic data (in this example
// one field is a translation, the other is calculated in PHP
$xsx_debug_translation_array = array(
	'message' => __( "Do you want to toggle PHP DEBUG?\nIt will reload the page and you'll loose your changes...", 'xsxdebug' ),
	'url' => admin_url( 'admin-ajax.php' )
);
// Call wp_localize_script with the Javascript handle, the name of the var that will be shared
// with the JS code and my array
wp_localize_script( 'xsx_debug_js', 'xsx_debug_translation', $xsx_debug_translation_array );
// and enqueue the script...
wp_enqueue_script( 'xsx_debug_js' );

In the Javascript the variable xsx_debug_translation has the content of my php $xsx_debug_translation_array, so I can use it.

jQuery.ajax({
	type: "POST",
	url: xsx_debug_translation.url,
	data : {
		"action": "xsx_debug_toggle",
	},
	dataType : "json",
	cache: false, 
});

Hope this can help.

3 Likes

thanks for pointing in the right direction, I’ll keep you updated

Edit: I think I have used the localize script to load the screenreadertext before with the navigation menu, and everything is getting clearer now , @Simone instead of loading the content directly from PHP, is there any way I can create like an input box directly in the classic editor, that allows me to load the data that way, it would be cumbersome to load my type of json data in PHP.

@Simone has steered you in the right direction.

For starters, JSON (JavsScript Object Notation) is simply a way to store data that can then be exchanged/interpreted between different languages.

Now, presuming you already have a plugin that has the right metaboxes, the general process would be…

  1. Call the JSON endpoint with wp_remote_get()
  2. Extract the body parameter from the response.
  3. json_decode the body parameter

You now have the JSON endpoint data in a PHP array. What you do next depends on your goal. Are you trying to save the JSON data (values) in your metabox fields? If so, you would simply populate your metabox’s inputs with the data from the PHP array and update the record when its saved.

When you call that metabox data from the database, it will be returned in one or more PHP variables (depending on how you stored the data.) In order to get those values out of PHP and accessible to your JS file, you’ll use the wp_localize_scripts() function, as @Simone mentioned, to localize the variable(s) to your particular script. Then, in your JS, you can alert or console.log the variable(s) to verify they passed through.


Note that when you localize a script, it must use the same handle that you used to enqueue the script, or it won’t work. For example, let’s say you enqueued 2 scripts:

// Enqueue scripts.
wp_enqueue_script('script-one', '{URL TO JS FILE ONE}');
wp_enqueue_script('script-two', '{URL TO JS FILE TWO}');

// Localize variables to "script-two" (the hook used above to enqueue the script).
wp_localize_script('script-two', 'my_vars', array(
	'some_value' => 'hello',
	'another_value' => 'goodbye'
));

Note that the above localizes the variable (array) my_vars to the JavaScript file that is enqueued with the script-two handle. In other words, these variables will be available in script-two, but not in script-one.

Now, to access the variable (in the script-two JS file,) you can do so like this:

alert(my_vars.some_value);
alert(my_vars.another_value);
 
1 Like

Added additional context and code examples. Written from memory, not tested… but, the basic process should be clearer.

1 Like

I’d probably skip the wp_remote_get here. It depends on how the JSON data is stored, but it should be accessible from within the ClassicPress install since it’s created there in the first place.

1 Like

Thanks for trying to help, but at this point in time, I should get a big slap for jumping around the bush, I only get to know some certain functions in CP whenever I am trying to solve a particular solution.

Even if I get my way around these things, I am really not confident if this is secure or how to fix what is not secure, I am currently taking a course on how to build a Wordpress plugin from scratch + some PDF’s to play along with, I am pretty fast taken courses.

The very next time, I’ll post on CP forum, would be a plugin of my own, that’s my goal!

Could someone close this post or how can I do that?

2 Likes

For some reason, I thought the data was remote…think I conflated several discussions. :slight_smile:

No worries. We all started somewhere. You can always ask questions here. Just fire up a new post once you’re oriented. :slight_smile:

Thread closed, per request.

3 Likes