how to get data from array in json format in javascript

Question

I have faced a problem. When I use http://headers.jsontest.com/ then I get value. Here is my code

<div id="ip"></div>


<script type="text/javascript">
    var getJSON = function(url) {
        return new Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open('get', url, true);
            xhr.responseType = 'json';
            xhr.onload = function() {
                var status = xhr.status;
                if (status == 200) {
                    resolve(xhr.response);
                } 
                else {
                    reject(status);
                }
            };
            xhr.send();
        });
    };

    getJSON('http://headers.jsontest.com/').then(function(data) {        

        for(x in data){
           ip.innerText = data.Host;    
        }

    },  function(status) {
            alert('Something went wrong.');
    });

</script>

But when I use this link I don't get any value My Link. Why it's not working

getJSON('http://67.225.137.209/index.php/queue_manage_api/queue/doc_id/3536/loc_id/4696/username/9791a47fef07649b1c3e70749e898153/password/2d593e25d0560b19fd84704f0bd24049/format/json').then(function(data) {        

    for(x in data){
       ip.innerText = data.id;    
    }

    },  function(status) {
        alert('Something went wrong.');
});

If a default data format {data} then I get default value But when data format like [{data}] then I don't get any value also. And my data format like [{data}] this. So how to get my data

$.getJSON("67.225.137.209/index.php/queue_manage_api/queue/doc_id/3536/…) — Marco Salerno
– Marco Salerno, Commented Mar 22, 2017 at 11:00
No console error @Mehun and I use $.getJSON But no data found@ Marco Sorry Douwe its data.id. It's mistake — A.A Noman
– A.A Noman, Commented Mar 22, 2017 at 11:10

Jorge Fuentes González · Accepted Answer · 2017-03-22 11:11:18Z

1

Browser security is firing. You need to enable CORS by adding this header to your reply:

Access-Control-Allow-Origin:*

If you look the Network tab (F12), you will see that http://headers.jsontest.com/ is already doing it.

Here you can read more info about CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

If the server is not yours and you can't add CORS, then they will have a reason to not do that (Is called security because a reason xD). Maybe they don't noticed and you can ask them to enable it.

Protip: When checking front-end code, always do it with the Developer Tools (F12) open (console tab).

edited Mar 22, 2017 at 11:11

answered Mar 22, 2017 at 11:04

Jorge Fuentes González

11.9k4 gold badges48 silver badges70 bronze badges

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

Comments

A.A Noman · Accepted Answer · 2017-03-23 11:04:29Z

I have edited my code below and It works fine. It gives me desired output.

<script type="text/javascript">

    $.ajax({
        xhrFields: {cors: false},
        url: "http://67.225.137.209/index.php/queue_manage_api/queue/doc_id/3536/loc_id/4696/username/9791a47fef07649b1c3e70749e898153/password/2d593e25d0560b19fd84704f0bd24049/format/json",
        type: "GET",
        crossDomain: true,
        dataType: "jsonp",

        success: function (response) {
            var resp = response; //JSON.parse(response);

            //alert(resp); //.status);

            for(x in resp){
                document.getElementById("ip").innerHTML += resp[x].name+" "+resp[x].id+" ";
            }
        },
        error: function (xhr, status) {
            alert("error");
        }
    });
</script>

Collectives™ on Stack Overflow

how to get data from array in json format in javascript

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related