How to acces first array in JSON object?

Question

So I'm trying to create a page through using data from a json file with XMLHttprequest. But I can't seem to find how I acces the first array.

This is my data.json file with some testing values:

{
"athletes": {
    "athlete": {
        "name": "Example name",
        "year": 2021,
        "lift": {
            "Deadlift": "180kg",
            "Squat": "120kg",
            "Benchpress": "100kg"
        }
    },
    "athlete": {
        "name": "Nice example name",
        "year": 2020,
        "lift": {
            "Deadlift": "80kg",
            "Squat": "100kg",
            "Benchpress": "140kg"
        }
    }
}

}

Here is my script:

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(xhttp.responseText);
        document.getElementById("test-data").innerText = response.athletes.athlete.name;
      }
    };
    xhttp.open("GET", "data.json", true);
    xhttp.send();

Right now the HTML file shows in the div container: Nice example name. But I can't seem to get the Athlete array with the name Example name. I've tried a lot of possibilities like:

response.athletes[0].athlete.name

response.athletes.athlete[0].name

for (let i in response.athletes) {
   document.getElementById("test-data").innerText = response.athletes[i].athlete.name;
}

But none of them have worked. Does anyone have an idea how to target the first athlete array in this code example? Thanks in advance!

There is no array which could be accessed. Besides a wrong syntax (twice the athlete key on the same object/property level) the data is purely nested key-value pairs. — Peter Seliger
– Peter Seliger, Commented Aug 30, 2021 at 11:21
you can't, your JSON is poorly done. The second athlete is the equivalent of a rewrite of the previous one — Mister Jojo
– Mister Jojo, Commented Aug 30, 2021 at 11:21
It seems like your JSNO data isn't really following the proper JSON format. The athletes key is an object holding two identical keys, which isn't possible. I'm guessing this the athletes' object should be an array instead, containing the two athlete objects. Can you check this? Maybe try and log the response variable to see how your code views the data structure. — Phoenix1355
– Phoenix1355, Commented Aug 30, 2021 at 11:22

Peter Seliger · Accepted Answer · 2021-08-30 11:28:06Z

2

Your example doesn't work because you're not accessing an array but an object. You'd have to structure your JSON response like this:

'athletes' : [
    {
        'name': 'xyz',
        'year': 2021,
        ...
    },
    {
        'name': 'abc',
        'year': 2020,
        ...
    },
]

Now you can access the first array-item like response.athletes[0].name.

edited Aug 30, 2021 at 11:28

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

answered Aug 30, 2021 at 11:25

pacman

3152 silver badges7 bronze badges

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

1 Comment

Sybrentjuhh Over a year ago

Nice, thanks for helping me show how the syntax should be! Now I understand how to write JSON better and this fixed my problem :)

Collectives™ on Stack Overflow

How to acces first array in JSON object?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related