Version:1.0 StartHTML:000000252 EndHTML:000016413 StartFragment:000007884 EndFragment:000016327 StartSelection:000007884 EndSelection:000016323 SourceURL:Ionic AngularJS complex json data extraction - Stack Overflow
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: