ERROR NgFor only supports binding to Iterables such as Arrays. JSON array is valid

Question

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.

view-specs.ts

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;


        });
}

JSON 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
    }
}

}

your vehicleSpecs is an object not array. – Fateme Fazli Aug 21 '18 at 04:56 — Fateme Fazli, Aug 21 '18 at 04:56

Chellappan வ · Accepted Answer · 2018-08-21T05:06:12.910

1

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

edited Aug 21 '18 at 05:06

answered Aug 21 '18 at 04:58

Chellappan வ

23,645
3
29
60

Adding '| keyvalue' results in a new error: The pipe 'keyvalue' could not be found I am using Angular 6 and not sure what I'm doing wrong here. Thanks for the help! – paigejulianne14 Aug 21 '18 at 05:18
keyvalue pipe only avilable 6.1 – Chellappan வ Aug 21 '18 at 05:28
i have added alternative try that – Chellappan வ Aug 21 '18 at 06:30
Following your angular2+ example gives me TypeError: Cannot convert undefined or null to object. Turns out I'm running Angular 5.2.11 – paigejulianne14 Aug 21 '18 at 18:21
please check that stackblitz example i have added solution for your json data – Chellappan வ Aug 21 '18 at 18:23
It took some more digging, but this finally worked: this.vehicleSpecs = Object.keys(result.data).map( key => ({type: key, value: result.data[key]})); – paigejulianne14 Aug 21 '18 at 18:31

score 1 · Answer 2 · answered Aug 21 '18 at 04:58

1

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>

answered Aug 21 '18 at 04:58

Suresh Kumar Ariya

9,516
1
18
27

Adding '| keyvalue' results in a new error: The pipe 'keyvalue' could not be found I am using Angular 6 and not sure what I'm doing wrong here. Thanks for the help! – paigejulianne14 Aug 21 '18 at 05:20
do ng --version and check u r using 6.1. If not. remove node_modules folder. Try these 2 commands 1) npm cache verify --clean 2) npm install – Suresh Kumar Ariya Aug 21 '18 at 05:41

Sajeetharan · Answer 3 · 2018-08-21T05:00:41.350

0

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">

edited Aug 21 '18 at 05:00

answered Aug 21 '18 at 04:57

Sajeetharan

216,225
63
350
396

So I tried doing that from https://stackoverflow.com/questions/38824349/convert-object-to-array-in-javascript but it makes it even worse – paigejulianne14 Aug 21 '18 at 04:58
Adding '| keyvalue' results in a new error: The pipe 'keyvalue' could not be found I am using Angular 6 and not sure what I'm doing wrong here. Thanks for the help! – paigejulianne14 Aug 21 '18 at 05:20

score 0 · Answer 4 · answered Aug 21 '18 at 04:58

0

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">

answered Aug 21 '18 at 04:58

Fateme Fazli

11,582
2
31
48

Adding '| keyvalue' results in a new error: The pipe 'keyvalue' could not be found I am using Angular 6 and not sure what I'm doing wrong here. Thanks for the help! – paigejulianne14 Aug 21 '18 at 05:20

score 0 · Answer 5 · answered Aug 21 '18 at 04:59

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
     }
  ]
    }

Yeah, but fixing it breaks an existing API which I don't have access to. — paigejulianne14, Aug 21 '18 at 05:24
If you are using lodash then there is inbuilt method that helps to convert object to array whithout any hesistance like...... _.values(result.data); — Aniket Avhad, Aug 21 '18 at 05:46

ERROR NgFor only supports binding to Iterables such as Arrays. JSON array is valid

view-specs.ts

JSON data

5 Answers5