Ionic complex json data extraction

#1

Version:1.0 StartHTML:000000252 EndHTML:000016413 StartFragment:000007884 EndFragment:000016327 StartSelection:000007884 EndSelection:000016323 SourceURL:https://stackoverflow.com/questions/55026890/ionic-angularjs-complex-json-data-extraction

I am new to Ionic and I am trying to transfer complex Json data to my html.(Where Ionic comes in handy).

What i mean by ‘complex’ Json data is, Jsons like this:

{
  "Key: "
     [
      {
       "Key: " "Value",
       "Key: " "Value"
      },
      {
       "Key: " "Value",
       "Key: " "Value"
      }
     ]
}

The problem here for me is the first key. I saw some examples for Json formats without this first key, Examples: https://www.youtube.com/watch?v=imaTBx4jbwY

What I have now is:

My .ts file:

import { Component } from '@angular/core';

import{HttpClient} from "@angular/common/http";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  BugList: Object;

  constructor(public http: HttpClient){
    this.http.get('jsonurl').pipe()
    .subscribe(res => this.BugList = res;), 
    (err) => {
      alert("failed loading data");
    });
  }
}

and for my html:

<ion-content>
  <ion-card *ngFor="let bug of BugList| async">
    <ion-card-header>
      <ion-card-subtitle>{{bug.Bugs[1].Title}}</ion-card-subtitle>
      <ion-card-title></ion-card-title>
    </ion-card-header>
  </ion-card>
</ion-content>

this gives me the following error:

ERROR Error: InvalidPipeArgument: ‘[object Object]’ for pipe ‘AsyncPipe’ Which means that i can only use the *ngFor argument for arrays and not complex Json objects, right?

I also saw another example: https://www.youtube.com/watch?v=TD1rKSuC3Zk

he tried it as follows:

this.http.get('https://randomuser.me/api/?results=10')
.map(res => res.json())
.subscribe(res => {
  this.users = res.results;
}, (err) => {
  alert("failed loading json data");
});
}

this one leaded me in the direction I am now. I replaced .map function with .pipe in my .ts file, because .map is outdated. Now i have a error that says Property ‘results’ does not exist on type 'Object’

Main question is: I really am struggling with this extra key, without it would not be so hard. is there a way i can do this dynamic using the methods shown?

Note: the following question is relevant to my question but is not provided with awnsers: