Unable to parse the json from url

Question

<html>
    <body>
        <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
        <script>
            $(document).ready(function () {
                $.ajax({
                    type: 'GET',
                    async: false,
                    contentType: "application/json",
                    url: "http://www.XXX.XXX.in/api/categories",//url:"dir/categories",
                    dataType: "jsonp", //dataType: "jsonp",
                    success: function (data) {
                        $.each(data, function(i,data) {
                            var det="<div>id :"+data.categoryId+" Name "+ data.categoryName+"</div></br>";
                            $(det).appendTo("#display");

                            //alert(det);
                        });
                        alert(data);
                    },
                    error: function (data) {
                        alert("this is error "+data);
                    }
                });
            });

        </script>

        <div id="display"></div>
    </body>
</html>

In the above code I am trying to access the categories json and print the details.
I am doing it in two ways:

I have kept the categories file in dir/ folder and accessing it which shows me result properly.
When I try to access it online it gives me an error: When I give dataType:"json" instead of jsonp I gives following error:

OPTIONS http:// XXX.XXX.in/api/categories 404 (Not Found)
XMLHttpRequest cannot load http:// XXX.XXX.in/api/categories. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:// localhost:8080' is therefore not allowed access.

I dont know whether the server has cross platform ref. added.

maybe this can help you http://www.sitepoint.com/jsonp-examples/ — ale, Jun 04 '14 at 06:56
@Infer-On thanks but still enable to solve cross platform parsing or getting the json... — Soham M, Jun 04 '14 at 07:41

Ravi Dhoriya ツ · Answer 1 · 2014-06-04T09:07:55.720

You can't access data of another domain from your domain using JAVASCRIPT. It is a security rule known as the "Same origin Policy"

So, to get data of another domain, you could write server side script (maybe in PHP or some other language you're familiar with.), then you can make ajax request from your script to the server.

The same origin policy is enforced by the browser to protect websites from other websites making xhr requests and displaying their content as if it was their own.

So site A.com cannot connect to B.com with XHR or:
http://A.com cannot connect to http://sub.A.com
localhost:80 cannot connect to localhhost:8080

Edit

As you requested, here is the solution using PHP script.

get_json_from_url.php

<?php
header("Content-type: text/json");
$response = fopen('http://www.eazydial.logicengine.in/api/categories', "rb");  
echo stream_get_contents($response);
?>

HTML page

<html>
    <body>
        <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
        <script>
            $(document).ready(function () {
                $.ajax({
                    type: 'GET',
                    url: "get_json_from_url.php",
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function(i,data) {
                            var det="<div>id :"+data.categoryId+" Name "+ data.categoryName+"</div></br>";
                            $(det).appendTo("#display");

                        });
                        console.log(data); //alert can't print [object] so always use console.log() to inspect object and it values. (see output in browser console)
                    },
                    error: function (data) {
                        console.log("Err:");
                        console.log(data);
                    }
                });
            });

        </script>

        <div id="display"></div>
    </body>
</html>

The solution provided here in PHP script will work only for GET request method. If you want to use POST request for any API then look for cURL library to get data from api.

Thankyou For Quick rep if i allow the cross-origin call form the server will it work or any other solution for this.. — Soham M, Jun 04 '14 at 06:59
It should work, if you allow cross origin at `http://www.eazydial.logicengine.in/` — Ravi Dhoriya ツ, Jun 04 '14 at 07:02
@user3705817, Refer these threads too for more information [link](http://stackoverflow.com/questions/9310112/why-am-i-seeing-an-origin-is-not-allowed-by-access-control-allow-origin-error), [link2](http://stackoverflow.com/questions/12683530/origin-http-localhost-is-not-allowed-by-access-control-allow-origin) — Ravi Dhoriya ツ, Jun 04 '14 at 07:07
I don't have deep knowledge of jsonp, I used to do ajax on my local php scripts and from php script i used to call api and `echo json`. Gud luck — Ravi Dhoriya ツ, Jun 04 '14 at 07:08
can u help me for how to get the json in php script from my code if i want to access the categories json from "http://www.eazydial.logicengine.in/api/categories" in php and then parse in jquery how can i do that — Soham M, Jun 04 '14 at 08:12
@user3705817, please check solution provided for PHP as you requested. I've tested it on my machine, its working :) — Ravi Dhoriya ツ, Jun 04 '14 at 09:08

Unable to parse the json from url

1 Answers1