How to access object and values on json and display as table?

[ahmed elbarbary]

problem

How to access object and values from json and display as table on angular 7 ?

I need to loop within object json below then get values from json and display all objects on columns

and rows as values

if other qualification array have application on fn attribute then

show exist

else

show not exist

html view will be as below

service.ts

how to call api having link retun json below
https://localhost/api/getallfeatures

component.ts
objJson : any ;
ngOnInit() {
// call service


}

component.html
How to execute ts to get view desired result as first post

json object as below :

{
"took": 2,
"timed_out": false,
"_shards": {
"total": 1
},
"hits": {
"total": {
"value": 104
},
"max_score": 1.0,
"hits": [
{
"_index": "partsdb",
"_type": "_doc",
"_source": {
"PID": 18831983,
"CID": 1006091,


"Compliance": [
{
"RS": "Not Compliant",
"RV": "2015/863"
}
],


"OtherQualification": [
{
"FN": "Calculated Failure Rate(FIT)",
"FV": "33.19",
"R": 293650338
},
{
"FN": "Confidence Level(UCL)",
"FV": "60%",
"R": 293650338
},
{
"FN": "Fails Quantity",
"FV": "0",
"R": 293650338
}
]


}
},
{
"_index": "partsdb",
"_type": "_doc",
"_source": {
"PID": 946447,
"CID": 1006091,




"Compliance": [
{
"RS": "Not Compliant",
"RV": "2019/863"


}
],






"OtherQualification": [
{
"FN": "Calculated Failure Rate(FIT)",
"FV": "33.19",
"R": 293650962
},
{
"FN": "Confidence Level(UCL)",
"FV": "60%",
"R": 293650962
},
{
"FN": "Fails Quantity",
"FV": "0",
"R": 293650962
}
]


}
},
{
"_index": "partsdb",
"_type": "_doc",
"_source": {
"PID": 946451,
"CID": 1006091,




"Compliance": [
{
"RS": "Not Compliant",
"RV": "2020/863"




}
],


"OtherQualification": [
{
"FN": "Application",
"FV": "33.19",
"R": 293650259
},
{
"FN": "Confidence Level(UCL)",
"FV": "60%",
"R": 293650259
},
{
"FN": "Fails Quantity",
"FV": "0",
"R": 293650259
}


]


}
}
]
}
}