Get Json Array with pure JS

Question

I would like to get JSON Array from a cross domain without using JQuery. The data from cross domain is like this:

{
      "transactionid": "LBS_48550801",
      "status": 0,
      "countrylist": 
    [
   { "id": 1, "name": "France", "latitude": 37.00039, "longitude": 35.31411, "extent": { "minlatitude": 36.53888499, "minlongitude": 34.76786904, "maxlatitude": 38.37851496, "maxlongitude": 36.40534884 }},
   { "id": 2, "name": "Germany", "latitude": 37.76454, "longitude": 38.27645, "extent": { "minlatitude": 37.40771898, "minlongitude": 37.43326512, "maxlatitude": 38.21203404, "maxlongitude": 39.24767592 } },
   //... .... .... 
   //... .... .... 
   //... .... .... 
   { "id": 98, "name": "Belgium", "latitude": 38.75754, "longitude": 30.5387, "extent": { "minlatitude": 37.78126803, "minlongitude": 29.68963308, "maxlatitude": 39.27915099, "maxlongitude": 31.71549708 } },
   { "id": 99, "name": "England", "latitude": 39.71812, "longitude": 43.03345, "extent": { "minlatitude": 38.96877501, "minlongitude": 42.28340184, "maxlatitude": 40.031208, "maxlongitude": 44.61092892 } },
    ]
}

After getting the data, I need to parse it to get "countrylist" list.

I searched for solving this issue but the examples are all with JQuery. I dont want to use it. As you see, I have transactionid, status parameters in the input. So, after importing the data, I need to parse it to get the countrylist array. I know how to parse it, but I couldnt get the whole data from the service.

I need to get the data by Javascript methods. The server supports retrieving data well.

The steps to be taken are:

1- Get the whole data (Here is where I got stuck)

2- Parse it as Json Object (I know how to parse the data)

How can I get the whole data without using any JQuery or other prepared libraries?

You don't need JSON to read the above data block, it is Javascript data — Noam Rathaus, Dec 23 '13 at 12:08
@nrathaus How can I import the data? After importing it, I would like to use it as json object. — Mark Karan, Dec 23 '13 at 12:09
@nrahaus My issue is with cross-domain. I can not get the whole data from my JSP by using only Javascript. — Mark Karan, Dec 23 '13 at 12:11

kmakarychev · Accepted Answer · 2013-12-23T14:00:46.463

12

You can use XMLHttpRequest for ajax and JSON.parse for parse json :)

var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', '//example.org', true);
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) {
            var obj = JSON.parse(xmlhttp.responseText);
            var countryList = obj.countrylist;
         }
    }
};
xmlhttp.send(null);

You should never use eval! Eval is evil! You can read about it on mdn

UPD:

If there is no CORS header, you can use JSONP. Just add &callback=getJSONP to your URL. Try it on jsfiddle: http://jsfiddle.net/VmBF7/3/

edited Dec 23 '13 at 14:00

answered Dec 23 '13 at 12:13

kmakarychev

731
4
14

nope, it does not work exactly. could you please check it with the following link: http://www.locationbox.com.tr/locationbox/services?Key=3430000202000191008400080609030X20201090060050260003069&Cmd=IlList – Mark Karan Dec 23 '13 at 12:32
Unfortunately, http://www.locationbox.com.tr/ doesn't have CORS headers, so you cannot make cross-origin request. You can get json in your server application and send it to browser. About CORS you can read on [mdn](https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS) – kmakarychev Dec 23 '13 at 12:38
This is not correct, I can get the whole data and the materials by using Java. If the system didnt support this technology, then I would not work on Java as well. So, I need to get the json response using xmlhttp request. – Mark Karan Dec 23 '13 at 12:44
@MarkKaran I've updated my answer with example of code. See it on jsfiddle (result is in console) – kmakarychev Dec 23 '13 at 14:01
dear @kmakarychev , thank you for your effort but i couldnt get any result in jsfiddle as well. is it my mistake? does the jsfiddle work? – Mark Karan Dec 23 '13 at 14:12
oh, its my mistake! it works on console! thank you very much! i solved the issue! gracias! – Mark Karan Dec 23 '13 at 14:23

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

since your operation involving cross domain requests, i suggest you to use jsonp request.

this question has what you wanted.

edited May 23 '17 at 12:34

Community

1
1

answered Dec 23 '13 at 12:19

denolk

765
14
27

this is not completely jsonp document. it includes array. i can not get the whole data by using jsonp. – Mark Karan Dec 23 '13 at 12:41

score 0 · Answer 3 · answered Dec 23 '13 at 12:08

0

Could you try to download the data to a hidden iframe and then parse the content of its document.body?

answered Dec 23 '13 at 12:08

Jorge_B

9,712
2
17
22

I can do it without having any problem but the content is not only this file. There are more contents from the server and I need to get server responses. – Mark Karan Dec 23 '13 at 12:10
Could you just parse the whole data structure with eval() and discard whatever you don't need? – Jorge_B Dec 23 '13 at 12:12
If I can get the whole data by using only Javascript, then ofcourse I can parse it. The issue is getting the data from cross domain. – Mark Karan Dec 23 '13 at 12:13
I am very sorry but I cannot understand your problem :( My original idea was to find some lateral way to the data you need, for example load it into a hidden iframe by programmatically changing its src attribute to the URL of your cross content. If that is not possible, please detail what keeps you from doing it or what additional information do you need from your cross domain – Jorge_B Dec 23 '13 at 13:13
I need to list ids and names at the following link on my JSP by using Javascript. First step is to get the whole data, second step is to parse the data. I can not get the whole data as Json data because there is an array in my data on third element. Here is the link: locationbox.com.tr/locationbox/services?Key=3430000202000191008400080609030X20201090060050260003069&Cmd=IlList – Mark Karan Dec 23 '13 at 13:17
Is it then some parse problem with your array? Looking at your first post, I can see an umbalanced comma at the end of the array, that can be a problem for Internet Explorer. Have you tried with any other browser? I am sorry if I am still a bit lost – Jorge_B Dec 23 '13 at 13:21
I can not parse it because, I couldnt get the data. The link works on other programs fine. It shouldnt be because of comma or etc. Im looking for how to get the whole data on my JSP by using Javascript. – Mark Karan Dec 23 '13 at 13:27
1

@Jorge_B You cannot use iframe because protocols, domains, and ports must match for accessing iframe. – kmakarychev Dec 23 '13 at 13:36

score 0 · Answer 4 · answered Dec 27 '15 at 04:02

In my case, since the server require a ajax request or it will give you a 404(to prevent csrf), so based on what the accepted answer, you need one extra line to complete the getJSON ajax version like this:

<script type="application/javascript">
    var request = new XMLHttpRequest();
    request.open('GET', '/your/url', true);
    // this following line is needed to tell the server this is a ajax request
    request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    request.onload = function () {
    if (this.status >= 200 && this.status < 400) {
            var json = JSON.parse(this.response);
            // this is where you can do something with the json response
        }
    };
    request.send();
    });
</script>

Get Json Array with pure JS

4 Answers4

Linked