[Fixed] Accessing nested object in html for angular

Issue

I have a data structure that looks like this:

app_list = ["app_1", "app_2"]
data["results"] =
{
    "app_1": [
        {"key":1},
        {"key":2}
    ],
    "app_2": [
        {"key":1},
        {"key":2}
    ],
}

And would like to display it with this html code:

<div *ngFor="let app of app_list" >
    {{app}}
    <pre>
        {{data?.results?.app | json}} #This line
    </pre>
    <div *ngFor="let item of data.results.app">
        {{item}}
    </div>
</div>

But the json object I have set as "This line" seems to not render anything.
This also means that the subsequent ngfor loop also does nothing. Am I doing something wrong here?

Whats a better way to do this?

Solution

It should be something like this:

<div *ngFor="let app of app_list" >
        {{app}}
        <pre>
            {{data?.results[app] | json}} #This line
        </pre>
        <div *ngFor="let item of data.results[app]">
            {{item}}
        </div>
    </div>