How to access a JSON array directly from url

Question

I am new to javascript and I have a Json Array in a url like below;

[{"year":2015,"month":4,"day":1,"num":0,"time":"2015-04-01","hour":0,"zone":3,"state1":2137,"state2":249,"state3":1810,"state4":30,"state5":0},....]

I want to access the state1 value and assign that value to the variable which I have.How can I do that?(Is parsing necessary or are there any methods there that we can directly access the JSON object in the URL).I am sorry if I asked anything wrong.

Use ajax to [load json from url](http://stackoverflow.com/questions/12460378/how-to-get-json-from-url-in-javascript), and parse the response using JSON.parse() method. If you are experiencing any problem with that let us know how did you write your code for that. We could help you correct it.. — Sen Jacob, Dec 10 '16 at 05:30
@guest271314 I retrieve it from a particular data source and keep it in that url. — RKR, Dec 10 '16 at 06:18
@RKR Do you mean actual URL, or variable? The `javascript` array at Question is a not a `JSON` string. — guest271314, Dec 10 '16 at 06:21
@guest271314 Actual URL it will be like http://localhost:8080/dataurl. I want to access the data in the URL.I think getJSON is the required one — RKR, Dec 10 '16 at 06:25
The array at Question is the expected result of request, yes? — guest271314, Dec 10 '16 at 06:28
Have you tried `javascript` at Answer posted by @GautamKrishnaR ? — guest271314, Dec 10 '16 at 07:00
Thank you all .I tried with Sen Jacob's Answer using getJSON and it worked like a charm — RKR, Dec 10 '16 at 07:19

score 3 · Accepted Answer · answered Dec 10 '16 at 07:53

You can use jQuery getJSON() function :

$.getJSON(' localhost:8080/dataurl', function(data) {
  //data is the JSON string
  var jsonObj = JSON.parse(data);    
});

Now, Below are the methods to parse the jsonObj to get the state1.

Using array map() method :

var jsonObj = [
                {
                  "year":2015,
                  "month":4,
                  "day":1,
                  "num":0,
                  "time":"2015-04-01",
                  "hour":0,
                  "zone":3,
                  "state1":2137,
                  "state2":249,
                  "state3":1810,
                  "state4":30,
                  "state5":0
                },
                {
                  "year":2016,
                  "month":12,
                  "day":1,
                  "num":0,
                  "time":"2015-04-01",
                  "hour":0,
                  "zone":3,
                  "state1":2474,
                  "state2":250,
                  "state3":1811,
                  "state4":31,
                  "state5":0
                }
              ];

var state1arr = jsonObj.map(function(item) {
  return item.state1;
});

console.log(state1arr);

using for...in loop :

var jsonObj = [
                {
                  "year":2015,
                  "month":4,
                  "day":1,
                  "num":0,
                  "time":"2015-04-01",
                  "hour":0,
                  "zone":3,
                  "state1":2137,
                  "state2":249,
                  "state3":1810,
                  "state4":30,
                  "state5":0
                },
                {
                  "year":2016,
                  "month":12,
                  "day":1,
                  "num":0,
                  "time":"2015-04-01",
                  "hour":0,
                  "zone":3,
                  "state1":2474,
                  "state2":250,
                  "state3":1811,
                  "state4":31,
                  "state5":0
                }
              ];

var state1arr = [];
for (var i in jsonObj) {
  state1arr.push(jsonObj[i].state1);
}

console.log(state1arr);

score 2 · Answer 2 · answered Dec 10 '16 at 05:46

2

The data you have is array of objects and you need to loop to access each object and access the key using dot notation

Like this,

var app=[{"year":2015,"month":4,"day":1,"num":0,"time":"2015-04-01","hour":0,"zone":3,"state1":2137,"state2":249,"state3":1810,"state4":30,"state5":0}];
for(var i of app)
{
console.log(i.state1);
}

answered Dec 10 '16 at 05:46

Lalitha

281
1
2
12

You can simply access the JSON var in js just like using the javascript object variable. you need not have to use the loops. – Gautam Krishna R Dec 10 '16 at 05:53

Gautam Krishna R · Answer 3 · 2016-12-10T06:01:21.017

Just use the following JS Code:

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();
  });
};

You can now use the function to get the JSON contents from the url:

getJSON("<URL>").then(function(data) { // Replace <URL> With your URL
    var jsondata = data.result; //store result in variable

    // Your code here....///
    ///  Now you can access the json's data using jsondata variable:  //
    // jsondata[0].year will have the value of year key, jsondata[0].month will have month key and so on.... //

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

How to access a JSON array directly from url

3 Answers3