how to parse json URL data in HTML web page

Question

I want to pare the JSON URL data in HTML web page and display it on page,I am using following code.

I want to show JSON Data in paragraph div.

<script>
  function gContent(){
    alert('working');

    $.getJSON('http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?                 organizationCode=att&userId1&', function(data) {
       alert(data);
       $(".paragraph").html(data);
    });
  }
</script>

possible duplicate of [Ways to circumvent the same-origin policy](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) — Quentin, Sep 16 '13 at 10:33
I am calling gContent() function onclick of heading tag, before JSON code, alert() is working but after JSON code there is no result appear in alert(), and want to append data into .paragraph div. Here is JSON result link i want to append into div. — ShakC, Sep 16 '13 at 10:45
You cannot directly use html() for json data.. convert it to string using JSON.stringify function. Then see what values you get as JSON in console.log... — Ganesh Babu, Sep 16 '13 at 11:21
@Ganesh i also use this $(".paragraph").html(JSON.stringify(data)); but it failed to do display any thing. — ShakC, Sep 16 '13 at 11:29
@ShakC I told you not to display it directly using JSON.stringify();. It will convert your json to string only. Just use console.log(JSON.stringify(data)); and then see what you get as output in console of chrome browser — Ganesh Babu, Sep 16 '13 at 12:26
@ShakC Before proceeding further, kindly check with the site you are trying to access.When I tried, Google blocked that site showing "Malware Detected".. Be careful in getting data from that site.. — Ganesh Babu, Sep 16 '13 at 12:37
@Ganesh alot of thanks for co-operate Got it here is problem in data loading XMLHttpRequest cannot load http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?organizationCode=att&userId1. Origin null is not allowed by Access-Control-Allow-Origin. — ShakC, Sep 16 '13 at 12:44
@ShakC Then it is simple. Just go ahead with CORS or JSONP.. — Ganesh Babu, Sep 16 '13 at 12:45
http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about go through this for JSONP... and http://www.html5rocks.com/en/tutorials/cors/ for CORS.. — Ganesh Babu, Sep 16 '13 at 12:49
@Ganesh i have made a function callback for JSONP as per you say, but still facing error here is the error after using JSONP: Resource interpreted as Script but transferred with MIME type text/html: "http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?organizationCode=att&userId1?callback=parseRequest". — ShakC, Sep 17 '13 at 09:32
@ShakC I have given some definition with my answer. I would like to see the jsonp callback function you have used. can you please show it in question? — Ganesh Babu, Sep 17 '13 at 10:02

score 1 · Answer 1 · answered Sep 16 '13 at 10:40

You can't call another domain using getJSON you have to call the same domain. you can solve this by one of the following:

if you have access to the 2nd domain you can add Access-Control-Allow-Origin header
if you have access to the 2nd domain You can change the request to JSONP and add a callback
if you don't have access to the 2nd domain you have to use a backend language for example in PHP, you create a new page for example calling_the_url.php and you do file_get_contents('url'); and in your javascript you call your calling_the_url.php instead.

score 1 · Answer 2 · answered Sep 16 '13 at 10:49

By the same you tried and just adding $.each using jQuery for getting each fieldData from the response.

 <script>
      function gContent(){
        alert('working');

        $.getJSON('http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?organizationCode=att&userId1&', function(data) {
           $.each(data, function(i, fieldData){

            $("p").append(fieldData + " ");  //appending fieldDatas to paragraph tag

          });
        });
      }
    </script>

score 1 · Answer 3 · edited May 23 '17 at 12:25

 Origin null is not allowed by Access-Control-Allow-Origin.

This is the message one usually get when trying to get data from other websites/domains due to same origin policy. Inorder to overcome this problem we go for two major methods:

JSONP
CORS

You can easily get your data using JSONP. If needed, you can use CORS, where you need that other website to allow your site in its headers.

In JSONP callback, one should be careful in the url you have given. That url where the callback value is present should not have any other elements except jsonp callback function. ie., first element of that page (even it should not have any html tags at first), should be jsonp callback function what you have given.

score 0 · Answer 4 · edited Sep 16 '13 at 10:35

0

You can try this:

jQuery.parseJSON('{"name":"John"}');

edited Sep 16 '13 at 10:35

hsz

148,279
62
259
315

answered Sep 16 '13 at 10:35

Raj

21
2

score 0 · Answer 5 · answered Sep 16 '13 at 10:38

0

You can use the JSON.stringify(), to print the data as string to the DOM.

$(".paragraph").html(JSON.stringify(data));

check this http://jsfiddle.net/cc8HX/

answered Sep 16 '13 at 10:38

Ashis Kumar

6,494
2
21
36

how to parse json URL data in HTML web page

5 Answers5