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

Missing dots on owl carousel

Retrieving information in JSON format

Utilizing UTC Time with AngularUI's UI-Date Datepicker

Eliminating duplicate p:dialog DOM nodes in Primefaces nested components

Troubleshooting tips for optimizing Opera and Internet Explorer performance

What is the best way to utilize v-select for searching entries while also allowing users to type in text within the input field for the search?

Tips for including an external .js file in a .php file

The Material UI autocomplete unexpectedly closes on click instead of displaying a popover as intended

Incorporate a course within the conditional statement

Is there a way to consistently apply default props to a styled component?

I've encountered a peculiar error that is new to me while using bootstrap and javascript. Can anyone shed light on what this error signifies?

Transform Document Into JSON Response

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

I successfully made a GET request using Postman, but encountered an issue when trying to do the same request through a

Retrieve the file from Amazon S3 and download it

A guide on using Javascript to write information to a JSON file

verifying an email address through firebase using the verifyPasswordResetCode method

What steps can be taken to eliminate the useSearchParams() and Suspense deployment error?

Find the average value of an array containing objects

What is the best way to implement auto-saving functionality for multiple form fields in a React application?