In the previous post we created a service that allowed us to give our data in JSON format.
Now let's focus on consuming that JSON. In this post I want to show how to use JSON data in the client (your browser), in a future post I'll show how to use JSON on the server (in the database).
If you want to play with JSON, open the console of your browser and create some text in JSON format - easy to do - and use the JSON.parse() function to create an object from it:
var text = '{"items": {"emp":[{"empno":7369, "ename":"SMITH"},{"empno":7499, "ename":"ALLEN"} ]}}';
var obj = JSON.parse(text);
As you will probably do a call somewhere to get JSON, I'll move on with such an example, so we will call the service we created with ORDS in the previous post and we want to use that data in our APEX page.
So edit your APEX Page in the JavaScript section "Execute when Page Loads" and put
(note you can put your own url that generates the json):
(note you can put your own url that generates the json):
$.getJSON("https://www.apexrnd.be/ords/training/emp_json/", function(json) {
console.log(json);
});
We just called the url from JavaScript and output the result to the console of the browser so we see what we got back:
We see the JSON (javascript object/array) we get back from the url. Note that the array starts with 0 (and not 1).
We can now do anything we want with that data. Here we set some items on the page of the first employee:
$('#P10_EMPNO').val(json.items[0].empno);
$('#P10_ENAME').val(json.items[0].ename);
A more interesting example is when you want to integrate Flickr foto's on your web page.
The concept is the same, call a url, once received loop over the array (see .each) and create an image tag on the fly on your page:
Another example would be when you want to include a visualisation in your page and as data it needs the data in JSON format... You could do that with an AJAX call for example (application process, plugin, ...), but that is for another post.
Hopefully this post showed how you can interact with JSON within your APEX page by using JavaScript.
Hopefully this post showed how you can interact with JSON within your APEX page by using JavaScript.
You find the online example at https://www.apexrnd.be/ords/f?p=DGIELIS_BLOG:JSON
6 comments:
Dmitri -
Thanks for the simple example. Learning Apex is a very slow process when you are the only one around who is using it. I appreciate that you gave a location on the page to put the getJSON function because it's not obvious to a newby.
But what about the jQuery to set P10_EMPNO and P10_ENAME? I put this in the 'Execute when Page Loads' section:
$.getJSON("https://www.apexrnd.be/ords/training/emp_json/", function(json) {
console.log(json);
$('#P1_EMPNO').val(json.items[0].empno);
$('#P1_EMPNAME').val(json.items[0].ename);
alert($('#P1_EMPNAME').val());
});
My page items are named slightly differently (obviously on page 1, not page 10, and empname not ename). And the alert does display SMITH, so the value appears - on page load - to be obtaining data from the JSON object. But the value is not displayed on the page itself, in the Display Item P1_EMPNAME. It's label is there, but the value is not. Where is Apex resetting the value that is set on page load?
Thanks,
Mike
Hi Mike,
Probably because it's a display only item... if it's a text item it should work.
If you want display only you need to check with the console how the field is called and probably use $('#P1_EMPNAME').html(json.items[0].ename)
Hope that helps,
Dimitri
Exactly, Dmitri! Thank you. I suspected it might be the Display type, but I was misreading the generated html. I'm also learning about the Console, and one of the sessions I heard today pointed me, in a round-about way, to P1_EMPNAME_DISPLAY. I knew the javascript innerHTML(), and then found jQuery's .html(). Now it works!
My only remaining question was posted on your previous blog: If I duplicate your emp_json web service in my apex.oracle workspace, what URL do I use to call it?
- Mike
HI Mike,
If you hit the TEST button in your webservice you see the url you should use.
Hope that helps,
Dimitri
Also, you can try use APEX's JavaScript function $s() to set the value for the page item.
Below is what I tried ... it is always good to know there are multiple ways to do it.
$('#P11_EMPNO').val(json.items[0].empno); //using jQuery val function to set value
$s('P11_ENAME', json.items[0].ename); //using APEX javascript function $s() to set the value
Cheers,
Kevin
You can also use APEX JS function $s() to set the value for the page item. Below is what I tried:
$('#P11_EMPNO').val(json.items[0].empno); //using jQuery val function to set value
$s('P11_ENAME', json.items[0].ename); //using APEX javascript API $s() to set the value
Kevin
Post a Comment