Unable to fetch Json data from remote url

Question

I am cracking my head to solve this thing. I am unable to fetch the JSON data from remote REST API. I need to fetch the JSOn data nd display the "html_url" field from the JSON data on my website. I saw that you need the below charset and content type for fetching JSON.

        <html>
            <head>
            <meta charset="utf-8">
            <meta http-equiv="content-type" content="application/json">
            </head>


            <body>

            <p>My Instruments page</p>
                <ul></ul>

                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
                <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
               <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>



                    <script type="text/javascript">
            $(document).ready(function () {
                alert("Inside the script");
                $.getJSON(" https://pki.zendesk.com/api/v2/help_center/sections/200268985/articles.json", function (obj) {
                    alert("Inside the getJSON");
                    $.each(obj, function (key, value) {
                        $("ul").append("<li>" + value.html_url + "</li>");
                    });

                });

            });
            </script>
            </body>
           </html>

I referred to following example on jsfiddle http://jsfiddle.net/2xTjf/29/ The "http://date.jsontest.com" given in this example also doesn't work in my code. The first alert is pops but not the other one.

I am a novice at JSON/ Jquery. i used jsonlint.com to find if it has valid JSON, it came out valid. I tested using chrome REST client too. What am I missing here ?

Arman Safikhani · Accepted Answer · 2014-08-20 16:49:26Z

1

Your browser is blocking Cross Domain Requests (You can see the error in browser console)

If your remote server supports CORS requests, you can enable CORS in jQuery by adding this line before requesting json data : $.support.cors = true;

And please note that the other party (server) should support CORS requests too (by adding Access-Control-Allow-Origin: * headers to http responce)

EDIT : If you have direct access to the REST api on server, you may enable JSON with Padding (JSONP). it will make it easier for code reuse.

edited Aug 20, 2014 at 16:49

answered Aug 20, 2014 at 16:38

Arman Safikhani

96510 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mplungjan Over a year ago

The URL supplied should wrap the response when given a ?callback= but did not

mplungjan · Accepted Answer · 2014-08-20 17:36:00Z

Issue #1: I assumed you needed CORS - by adding crossDomain: true to a $.ajax or a $.support.cors = true; before the call.

However CORS is not supported by PKI so you cannot do this without a proxy. I have tested JSONP and it also is not supported by PKI in the URL you supplied

Issue #2: you are loading two versions of jQuery remove one and remove the UI until it works without

Issue #3: Your each is also wrong, it should be

$.each(data.articles, function (_,obj) {
  $("ul").append("<li>" + obj["html_url"] + "</li>");
});

JSFIDDLE

The complete script looks like

$(function () {
    $.get("searchproxy.php?url="+encodeURI("https://pki.zendesk.com/api/v2/help_center/sections/200268985/articles.json"),
      function (jsonstring) {
        var data = JSON.parse(jsonstring);
        $.each(data.articles, function (_,obj) {
          $("ul").append("<li>" + obj["html_url"] + "</li>");
        });
    });
});

using

<?php
$url = $url = $_GET["url"];
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$curl_scraped_page = curl_exec($ch);
curl_close($ch);
echo $curl_scraped_page;
?>

LIVE EXAMPLE

Collectives™ on Stack Overflow

Unable to fetch Json data from remote url

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related