Accessing JSON data in Angular application (Multiple nested arrays)

Question

How can I access 'line' data from the given object? This is the link to api -https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json

{
    "events": [{
        "id": 153502679,
        "name": "Green Bay Packers @ Chicago Bears",
        "homeTeamName": "CHI Bears",
        "awayTeamName": "GB Packers",
        "startDate": "2019-09-06T00:20:00.0000000Z",
        "offers": [{
            "id": "1-2160521227",
            "label": "Point Spread",
            "outcomes": [{
                "id": "1-2568051855",
                "label": "GB Packers",
                "line": "+3.5000",
                "oddsAmerican": "-110",
                "oddsDecimal": 1.9100,
                "oddsFractional": "10/11",
                "participant": "GB Packers"
            },

I am getting

<td>{{data.name }}</td>
        <td>{{data.homeTeamName }}</td>
        <td>{{data.awayTeamName}}</td>
        <td>{{data.startDate }}</td>
        <!--<td>{{data.offers[1].label }}</td>-->
        <td>{{data.offers.outcomes[2].line }}</td>

I tried the above code to access line in outcomes object by it give me below error

ERROR TypeError: Cannot read property '2' of undefined

Possible duplicate of [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — JJJ, Jun 13 '19 at 07:05

score 1 · Answer 1 · answered Jun 12 '19 at 19:24

1

Provided Api response contains 3 nested Arrays. So you have to consider them while accessing their values. Depending on the number of items you have in the array below solution will vary. In your example, You are accessing values of the first item of array 'Events', 'offers', 'outcomes'.

In this specific case, You may try

<td>{{data.events[0].offers[0].outcomes[0].line}} </td>

answered Jun 12 '19 at 19:24

Nick Thakkar

862
1
9
13

It worked, can you explain why did you take 0 index? – Ashish Shah Jun 12 '19 at 19:29
Because its an array. How else would it know to take the first element? – Rich Jun 12 '19 at 19:30
Would'nt offers[0] would be pointing to first index which is id? – Ashish Shah Jun 12 '19 at 19:32
@AshishShah Array starts with index 0. So when you want to access first item of the Array, you need to point to Index 0. For 2nd item in the array, index 1. For 3rd item in the array , index 2 and so forth. Remember, When dealing with Arrays its always use index length-1. For Example, Array of 5 items will have max index of 4 which is length-1. – Nick Thakkar Jun 12 '19 at 19:35
@AshishShah No. offers[0].id will return id. – Nick Thakkar Jun 12 '19 at 19:36

Saksham · Answer 2 · 2019-06-12T19:27:23.923

Considering you have just one item in each nested aray, you can access line as

let data = {
    "events": [{
        "id": 153502679,
        "name": "Green Bay Packers @ Chicago Bears",
        "homeTeamName": "CHI Bears",
        "awayTeamName": "GB Packers",
        "startDate": "2019-09-06T00:20:00.0000000Z",
        "offers": [{
            "id": "1-2160521227",
            "label": "Point Spread",
            "outcomes": [{
                "id": "1-2568051855",
                "label": "GB Packers",
                "line": "+3.5000",
                "oddsAmerican": "-110",
                "oddsDecimal": 1.9100,
                "oddsFractional": "10/11",
                "participant": "GB Packers"
                
            }]
        }]
    }]
}

console.log(data.events[0].offers[0].outcomes[0].line);

If there are n number of objects in each nested array, you can do as

let data = {
    "events": [{
        "id": 153502679,
        "name": "Green Bay Packers @ Chicago Bears",
        "homeTeamName": "CHI Bears",
        "awayTeamName": "GB Packers",
        "startDate": "2019-09-06T00:20:00.0000000Z",
        "offers": [{
            "id": "1-2160521227",
            "label": "Point Spread",
            "outcomes": [{
                "id": "1-2568051855",
                "label": "GB Packers",
                "line": "+3.5000",
                "oddsAmerican": "-110",
                "oddsDecimal": 1.9100,
                "oddsFractional": "10/11",
                "participant": "GB Packers"
                
            }]
        }]
    }]
}


data['events'].forEach(event => {
    event.offers.forEach(offer => {
        offer.outcomes.forEach(outcome => {
          console.log(outcome.line);
        });
    });
});

Why 0 as index? Would'nt offers[0] would be pointing to first index which is id? — Ashish Shah, Jun 12 '19 at 19:35
@AshishShah offers is an array of object where `offers[0]` would gove you the whole object. — Saksham, Jun 12 '19 at 19:43

Alvaro · Accepted Answer · 2019-06-12T19:56:08.463

0

It looks like you're not accessing the data in the offers Array.

Please, try the following code to access the events, then the offers and then the outcomes:

data.events[0].offers[0].outcomes[0].line

Hope it works!

edited Jun 12 '19 at 19:56

answered Jun 12 '19 at 19:23

Alvaro

1,853
18
24

You're right. I have updated the answer. Thank you! – Alvaro Jun 12 '19 at 19:57

Accessing JSON data in Angular application (Multiple nested arrays)

3 Answers3