AJAX: How to Read JSON Data

Question

I am trying to get json data from url. Here's the js

var myRequest = new XMLHttpRequest();
  myRequest.open('GET', 'URL that has JSON format');
  myRequest.onload = function() {
    var myData = JSON.parse(myRequest.responseText);
    console.log(myData);
  };
myRequest.send();

The JSON data format is like this

"ING":
    [
        {
            "#":1,
            "Team":"Manchester City",
            "Main":37,
            "Poin":97
        },
        {
            "#":2,
            "Team":"Manchester United",
            "Main":37,
            "Poin":78
        },
        {
            "#":3,
            "Team":"Tottenham Hotspur",
            "Main":37,
            "Poin":74
        },
        {
            "#":4,
            "Team":"Liverpool",
            "Main":37,
            "Poin":72
        },
        {
            "#":5,
            "Team":"Chelsea",
            "Main":37,
            "Poin":70
        }
    ]
}

for example i want to fetch Chealsea. How can i achieve that? i know that i have to change

console.log(myData);

What should i do? Thanks

Your question is actually unclear. How do you know you want to acces `Chelsea`? Since it's the 5th item in _an array_, we need to know - are you looking for a way to _find_ information? Or simply how to _access_ it? Accessing is simple: `var data = myData.ING[4].Team`, or `myData['ING'][4]['Team']` ... but _finding_ the record with the team of chelsea is different altogether... — random_user_name, May 11 '18 at 17:41
var chelseaTeam = obj.ING.filter(function(team){ team.Team === 'Chelsea';}) — Muhammad Sadiq, May 11 '18 at 17:49
@cale_b sorry if my question is unclear, actualy i need simply to access it. myData['ING'][4]['Team'] is what i needed. Thank you. — dany, May 11 '18 at 17:50
@dany - leave it. The community will eventually close it as duplicate, but the question will remain as a "flagpost" for others searching in the same way that you posted the question. — random_user_name, May 11 '18 at 20:25
@dany I added answer, hope it will work as per your expectation. — Debug Diva, May 14 '18 at 07:43

baao · Answer 1 · 2018-05-11T17:47:46.580

1

You can use find() to find something in an array. I changed Chelsea with Liverpool, as they will win the Champions League this year. Who cares about another team then...

let obj = {"ING":
    [
        {
            "#":1,
            "Team":"Manchester City",
            "Main":37,
            "Poin":97
        },
        {
            "#":2,
            "Team":"Manchester United",
            "Main":37,
            "Poin":78
        },
        {
            "#":3,
            "Team":"Tottenham Hotspur",
            "Main":37,
            "Poin":74
        },
        {
            "#":4,
            "Team":"Liverpool",
            "Main":37,
            "Poin":72
        },
        {
            "#":5,
            "Team":"Chelsea",
            "Main":37,
            "Poin":70
        }
    ]
}
console.log(obj.ING.find(e => e.Team === 'Liverpool'));

edited May 11 '18 at 17:47

answered May 11 '18 at 17:45

baao

71,625
17
143
203

Duplicate of https://stackoverflow.com/questions/7364150/find-object-by-id-in-an-array-of-javascript-objects – random_user_name May 11 '18 at 17:47
Oh, I did. But with 37k rep, I'd expect _you_ to do that as well :) – random_user_name May 11 '18 at 17:48
Sorry, just answered to change it to Liverpool @cale_b – baao May 11 '18 at 17:51

score 1 · Answer 2 · answered May 11 '18 at 17:46

You can use callback, promises or async/await. Here's a way that you can use callback to get and use the retrieved data:

function getUrl(url, callback) {
  var myRequest = new XMLHttpRequest();
  myRequest.open('GET', url);
  myRequest.onload = function() {
    var myData = JSON.parse(myRequest.responseText);
    console.log(myData);
    callback(myData);
  };
  myRequest.send();
}

and you request and use your data like so:

getUrl('URL for JSON DATA', function(data) {
  // find chealsea
  var chealsea = data.ING.find(function(entry) { return entry.Team === 'Chealsea' });
  console.log(chealsea);
});

score 1 · Answer 3 · answered May 11 '18 at 17:53

To read a JSON. Notice the bracket type,

if it has [], then treat that part as an array, if it has curly braces {3, then as an object.

to access Array object, use index, like 0, 1, 2 ... to access objects, you can use dot notation your_object.keyoryour_object["key"]

in your case, we can read it like

let json = {"ING":[{...}]}

json["ING"][0]["SOME_KEY"] ...

score 0 · Answer 4 · answered May 14 '18 at 07:42

Try this :

var myData = {
 "ING": [{
   "#": 1,
   "Team": "Manchester City",
   "Main": 37,
   "Poin": 97
  },
  {
   "#": 2,
   "Team": "Manchester United",
   "Main": 37,
   "Poin": 78
  },
  {
   "#": 3,
   "Team": "Tottenham Hotspur",
   "Main": 37,
   "Poin": 74
  },
  {
   "#": 4,
   "Team": "Liverpool",
   "Main": 37,
   "Poin": 72
  },
  {
   "#": 5,
   "Team": "Chelsea",
   "Main": 37,
   "Poin": 70
  }
 ]
};

var res = myData.ING.filter(obj => obj.Team == "Chelsea");

console.log(res[0].Team);

AJAX: How to Read JSON Data

4 Answers4