Having difficulty interpreting the json data retrieved from the specified url

Question

Having difficulty interpreting the json data retrieved from the specified url

<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>

Attempting to retrieve and display category information in JSON format using jQuery.
Using two different methods:

Successfully accessing the local categories file in the dir/ folder.
Encountering an error when trying to access it online with a different datatype:

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.

Uncertain if server has cross-platform reference added.

javascript ajax json

Answer 1

Answer №1

To prevent cross-domain data access from your domain using JAVASCRIPT, the "Same Origin Policy" security rule applies.

If you need to access data from another domain, you can create a server-side script (such as in PHP or another language you know) and make an ajax request from that script to the server.

The Same Origin Policy is enforced by browsers to protect websites from other sites making xhr requests and displaying their content as if it were their own.

For example, site A.com cannot connect to B.com with XHR, and cannot connect to . Additionally, localhost:80 cannot connect to localhost:8080.

Edit

Here is an example of a solution using a 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 provided solution using a PHP script only works for GET request methods. If you require POST requests for any API, consider using the cURL library to retrieve data from the API.

Answer 2

To prevent cross-domain data access from your domain using JAVASCRIPT, the "Same Origin Policy" security rule applies.

If you need to access data from another domain, you can create a server-side script (such as in PHP or another language you know) and make an ajax request from that script to the server.

The Same Origin Policy is enforced by browsers to protect websites from other sites making xhr requests and displaying their content as if it were their own.

For example, site A.com cannot connect to B.com with XHR, and cannot connect to . Additionally, localhost:80 cannot connect to localhost:8080.

Edit

Here is an example of a solution using a 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 provided solution using a PHP script only works for GET request methods. If you require POST requests for any API, consider using the cURL library to retrieve data from the API.

Having difficulty interpreting the json data retrieved from the specified url

Answer №1

Similar questions

Locate a specific element within an array and retrieve its corresponding index

There was a glitch encountered while constructing (Verifying type validity) with Prisma

Using JMeter to extract specific data from a response based on a condition in JSON format

Tips for Visualizing Daily Order Totals with a Graph

Issue with Firefox pageMod addon: window.location not functioning properly

Each time the website refreshes, Object.entries() rearranges the orders

The order of items in MongoDB can be maintained when using the $in operator by integrating Async

Mastering the art of invoking the right view method in Django

"What is the best approach to adjusting the width of one div based on the width of another div using CSS Grid

General procedure: identifying the specific input element triggering the keypress event, without directly specifying the ID or other identifiers

A helpful tip for dynamically adjusting the canvas size is to utilize its height and width attributes to resize it whenever it undergoes a change

Restructure an array of objects into a nested object structure

This route does not allow the use of the POST method. Only the GET and HEAD methods are supported. This limitation is specific to Laravel

Apologies, we are experiencing a server error. TypeError: Unable to access the 'map' property of an undefined

How to Override Certificate Expiry in JavaScript

Displaying information in ejs format

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Using JavaScript to launch a new window for a specific folder

When using $.getJSON and $.ajax, the expected JSON object is not being returned

Issues with Ajax.BeginForm causing JSON to be returned as undefined (Confirmed by Dev Tools)