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? — JJJ
– JJJ, Commented Jun 13, 2019 at 7:05

Nick Thakkar · Accepted Answer · 2019-06-12 19:24:27Z

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, 2019 at 19:24

Nick Thakkar

8921 gold badge9 silver badges13 bronze badges

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

5 Comments

Ashish Shah Over a year ago

It worked, can you explain why did you take 0 index?

Rich Over a year ago

Because its an array. How else would it know to take the first element?

Ashish Shah Over a year ago

Would'nt offers[0] would be pointing to first index which is id?

Nick Thakkar Over a year ago

@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 Over a year ago

@AshishShah No. offers[0].id will return id.

Alvaro · Accepted Answer · 2019-06-12 19:56:08Z

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, 2019 at 19:56

answered Jun 12, 2019 at 19:23

Alvaro

2,06520 silver badges26 bronze badges

1 Comment

Alvaro Over a year ago

You're right. I have updated the answer. Thank you!

Saksham · Accepted Answer · 2019-06-12 19:27:23Z

0

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

edited Jun 12, 2019 at 19:27

answered Jun 12, 2019 at 19:21

Saksham

9,4209 gold badges48 silver badges75 bronze badges

2 Comments

Ashish Shah Over a year ago

Why 0 as index? Would'nt offers[0] would be pointing to first index which is id?

Saksham Over a year ago

@AshishShah offers is an array of object where offers[0] would gove you the whole object.

Collectives™ on Stack Overflow

Accessing JSON data in Angular application (Multiple nested arrays)

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related