Доступ к данным JSON в приложении Angular (несколько вложенных массивов)

Question

Как я могу получить доступ к «строковым» данным из данного объекта?Это ссылка на 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"
            },

Я получаю

<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>

Я пробовал приведенный выше код для доступа к строке в объекте результатов по нему, выдает мне ошибку ниже

ERROR TypeError: Cannot read property '2' of undefined

Answer 1

При условии, что ответ Api содержит 3 вложенных массива. Таким образом, вы должны учитывать их при доступе к их ценностям. В зависимости от количества предметов, которые у вас есть в массиве ниже, решение будет отличаться. В вашем примере вы получаете доступ к значениям первого элемента массива «События», «предложения», «результаты».

В этом конкретном случае, вы можете попробовать

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

Answer 2

Учитывая, что у вас есть только один элемент в каждом вложенном массиве, вы можете получить доступ к line как

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

Если в каждом вложенном массиве имеется n объектов, вы можете сделать как

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

Answer 3

Похоже, вы не обращаетесь к данным в массиве предложений.

Пожалуйста, попробуйте следующий код для доступа к событиям, затем к предложениям, а затем к результатам:

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

Надеюсь, что это работает!

Answer 4

Вы должны попробовать

 <td>{{data.offers.outcomes.line }}</td>