I keep getting ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
*ngFor="let spec of vehicleSpecs"
I've tried everything I can think of, including searching here. It's a valid JSON array, so I really don't understand what's going on.
ngOnInit() {
// get locally saved user information
let user_id = window.localStorage.getItem('user_id');
// construct the url
let apiUrl = 'https://ridetrekker.com/api_v1/vehiclespecs/' + this.vehicle_id;
// add the X-API-KEY HTTP header as required by API
let key = window.localStorage.getItem('key');
let options = {
headers: new HttpHeaders({
'X-API-KEY': key
})
};
// do the ajax request
this.http.get(apiUrl, options)
.subscribe(result => {
console.log(result);
this.vehicleSpecs = result.data;
});
}
{
"status": true,
"message": null,
"data": {
"0": {
"model_detail_id": "1509824",
"type_title": null,
"unit_title": "Millimeters",
"unit_code": "MM",
"measurement_type_title": "Free Play",
"type_item_title": null,
"spec_title": "Clutch Cable",
"system_title": "Controls",
"value_a": 10,
"value_b": 20
},
"1": {
"model_detail_id": "1509827",
"type_title": null,
"unit_title": "Millimeters",
"unit_code": "MM",
"measurement_type_title": "Free Play",
"type_item_title": null,
"spec_title": "Throttle Cable",
"system_title": "Controls",
"value_a": 2,
"value_b": 6
},
"2": {
"model_detail_id": "1509830",
"type_title": null,
"unit_title": "RPM",
"unit_code": "R/Min",
"measurement_type_title": "RPM",
"type_item_title": null,
"spec_title": "Engine Idle Speed",
"system_title": "Engine - General",
"value_a": 830,
"value_b": 1030
},
"3": {
"model_detail_id": "1509851",
"type_title": "Engine Oil Grades",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Standard Grade",
"type_item_title": "GN4 10W-40",
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": null,
"value_b": null
},
"4": {
"model_detail_id": "1509854",
"type_title": "Engine Oil Grades",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Premium Grade",
"type_item_title": "HP4S 10W-30 Synthetic Oil",
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": null,
"value_b": null
},
"5": {
"model_detail_id": "1509707",
"type_title": null,
"unit_title": "Liters",
"unit_code": "L",
"measurement_type_title": "Level",
"type_item_title": null,
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": 3.5,
"value_b": null
},
"6": {
"model_detail_id": "1509710",
"type_title": null,
"unit_title": "Liters",
"unit_code": "L",
"measurement_type_title": "Level With Filter",
"type_item_title": null,
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": 3.7,
"value_b": null
},
"7": {
"model_detail_id": "1509716",
"type_title": null,
"unit_title": "Foot Pounds",
"unit_code": "FT LBS",
"measurement_type_title": "Torque",
"type_item_title": null,
"spec_title": "Engine Oil Drain Bolt",
"system_title": "Engine - General",
"value_a": 22,
"value_b": null
},
"8": {
"model_detail_id": "1509719",
"type_title": null,
"unit_title": "Foot Pounds",
"unit_code": "FT LBS",
"measurement_type_title": "Torque",
"type_item_title": null,
"spec_title": "Engine Oil Filter",
"system_title": "Engine - General",
"value_a": 19,
"value_b": null
},
"9": {
"model_detail_id": "1509866",
"type_title": "Spark Plug Type",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Type",
"type_item_title": "DCPR6E",
"spec_title": "Spark Plug",
"system_title": "Ignition",
"value_a": null,
"value_b": null
},
"10": {
"model_detail_id": "1509869",
"type_title": "Spark Plug Type",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Type",
"type_item_title": "DCPR7E",
"spec_title": "Spark Plug Alternate",
"system_title": "Ignition",
"value_a": null,
"value_b": null
}
}
}
As i see result.data
is an object
of objects
, you need either an array or convert to array of objects.
if you are using latest version of angular, you can simply use the keyvalue pipe.
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
If you are using angular 6.1 Use keyvalue pipe
*ngFor="let spec of vehicleSpecs.data | keyvalue"
For angular 2+
Try this
TS
get key(){
return Object.keys(this.results.data);
}
HTML
<div *ngFor="let k of key">
<div>key: {{results.data[k].model_detail_id}}</div>
<div>key: {{results.data[k].unit_title}}</div>
</div>
Example: https://stackblitz.com/edit/angular-6-template-r9dmnv
you can try:
vehicleSpecs=[]
for(let item in result.data)
this.vehicleSpecs.push(item)
or use keyvalue pipe:
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
If you are using Angular 6.1 it supports keyvalue pipe.
<p>Maps & KeyValue Pipe</p>
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value.model_detail_id}}</b>
</div>
Json is not valid,
If you want to iterate using ngFor then the type of data must be array
valid json is like,
{
"status": true,
"message": null,
"data": [
"0": {
"model_detail_id": "1509824",
"type_title": null,
"unit_title": "Millimeters",
"unit_code": "MM",
"measurement_type_title": "Free Play",
"type_item_title": null,
"spec_title": "Clutch Cable",
"system_title": "Controls",
"value_a": 10,
"value_b": 20
},
"1": {
"model_detail_id": "1509827",
"type_title": null,
"unit_title": "Millimeters",
"unit_code": "MM",
"measurement_type_title": "Free Play",
"type_item_title": null,
"spec_title": "Throttle Cable",
"system_title": "Controls",
"value_a": 2,
"value_b": 6
},
"2": {
"model_detail_id": "1509830",
"type_title": null,
"unit_title": "RPM",
"unit_code": "R/Min",
"measurement_type_title": "RPM",
"type_item_title": null,
"spec_title": "Engine Idle Speed",
"system_title": "Engine - General",
"value_a": 830,
"value_b": 1030
},
"3": {
"model_detail_id": "1509851",
"type_title": "Engine Oil Grades",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Standard Grade",
"type_item_title": "GN4 10W-40",
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": null,
"value_b": null
},
"4": {
"model_detail_id": "1509854",
"type_title": "Engine Oil Grades",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Premium Grade",
"type_item_title": "HP4S 10W-30 Synthetic Oil",
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": null,
"value_b": null
},
"5": {
"model_detail_id": "1509707",
"type_title": null,
"unit_title": "Liters",
"unit_code": "L",
"measurement_type_title": "Level",
"type_item_title": null,
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": 3.5,
"value_b": null
},
"6": {
"model_detail_id": "1509710",
"type_title": null,
"unit_title": "Liters",
"unit_code": "L",
"measurement_type_title": "Level With Filter",
"type_item_title": null,
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": 3.7,
"value_b": null
},
"7": {
"model_detail_id": "1509716",
"type_title": null,
"unit_title": "Foot Pounds",
"unit_code": "FT LBS",
"measurement_type_title": "Torque",
"type_item_title": null,
"spec_title": "Engine Oil Drain Bolt",
"system_title": "Engine - General",
"value_a": 22,
"value_b": null
},
"8": {
"model_detail_id": "1509719",
"type_title": null,
"unit_title": "Foot Pounds",
"unit_code": "FT LBS",
"measurement_type_title": "Torque",
"type_item_title": null,
"spec_title": "Engine Oil Filter",
"system_title": "Engine - General",
"value_a": 19,
"value_b": null
},
"9": {
"model_detail_id": "1509866",
"type_title": "Spark Plug Type",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Type",
"type_item_title": "DCPR6E",
"spec_title": "Spark Plug",
"system_title": "Ignition",
"value_a": null,
"value_b": null
},
"10": {
"model_detail_id": "1509869",
"type_title": "Spark Plug Type",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Type",
"type_item_title": "DCPR7E",
"spec_title": "Spark Plug Alternate",
"system_title": "Ignition",
"value_a": null,
"value_b": null
}
]
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.