1

I am working on angular 2 application, in my current project I am getting the data from my API and It's gives the JSON like below.

{
    "makes": null,
    "models": null,
    "trims": null,
    "years": null,
    "assetTypes": {
        "2": "Auto",
        "3": "Motorcycle"
    }
}

Next I am converting the JSON data to typescript using json2ts tool from this link http://json2ts.com/

Typescript.ts

export interface AssetTypes {
    2: string;
    3: string;
}

export interface RootObject {
    makes?: any;
    models?: any;
    trims?: any;
    years?: any;
    assetTypes: AssetTypes;
}

Then After I will use below lines of code In my component.ts

 lookupdetailsassettypeinfo: RootObject;
 this._vehicleInfoService.getLookupDetailsTableAssetTypeInfo()
        .subscribe(lookupdetailsinfo => this.lookupdetailsassettypeinfo = lookupdetailsinfo,
        error => this.error = <any>error);

But when I am using the lookupdetailsassettypeinfo in my component.html like this below. it always gives the exception like Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

<select id="ASSET_TYPE" class="col-md-12 form-control" >
    <option>Select One</option>
    <option *ngFor='let type of lookupdetailsassettypeinfo'>{{type.assetTypes.Customer}}</option>
</select>

Can you please tell me how to resolve the above exception.

-Pradeep

Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
Pradeep
  • 5,101
  • 14
  • 68
  • 140
  • If you change `.subscribe(lookupdetailsinfo => this.lookupdetailsassettypeinfo = lookupdetailsinfo,` to `.subscribe(lookupdetailsinfo => {this.lookupdetailsassettypeinfo = lookupdetailsinfo; console.log(this.lookupdetailsassettypeinfo); }, what does it print? – Günter Zöchbauer Dec 07 '16 at 10:43
  • `lookupdetailsassettypeinfo: RootObject;` already indicates that it's not supposed to be an array. – Günter Zöchbauer Dec 07 '16 at 10:44
  • I am trying this line of code lookupdetailsassettypeinfo: RootObject[] but it doesn't work – Pradeep Dec 07 '16 at 10:56
  • This type is ignored at runtime, this is why I said "indicates". What's relevant is what the `console.log(...)` call prints. – Günter Zöchbauer Dec 07 '16 at 10:57
  • on the console option, I got the results like this below. [object Object] {assetTypes: Object {...}, makes: null, models: null, trims: null, years: null} – Pradeep Dec 07 '16 at 11:00
  • Doesn't look like an array ;-) – Günter Zöchbauer Dec 07 '16 at 11:01
  • I am new to typescript, So can you please tell me how to make my results looks likes an array – Pradeep Dec 07 '16 at 11:05
  • change this lookupdetailsassettypeinfo: RootObject; to this lookupdetailsassettypeinfo: RootObject[]; and change the map type in service too. – Sriram Dec 07 '16 at 11:07
  • If they actually aren't arrays it's probably better you use a pipe as shown in the answer I linked to in my answer below. – Günter Zöchbauer Dec 07 '16 at 11:08
  • Can you please tell me how to convert exact typescript class for this below JSON. { "makes": null, "models": null, "trims": null, "years": null, "assetTypes": { "2": "Auto", "3": "Motorcycle" } } – Pradeep Dec 07 '16 at 13:03
  • Can you please tell me in the above JSON I want to bind only assetTypes values like "Auto" and "MotorCycle" to my dropdown list in view. – Pradeep Dec 08 '16 at 09:16

1 Answers1

0

*ngFor doesn't support iterating over object properties. It only supports arrays.

See also Access Typescript Object Variables in Angular2

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks, I know *ngFor doesn't support iterating over object properties. It only supports arrays. can you please tell me in my code where I did mistake and how to resolve the above issue – Pradeep Dec 07 '16 at 10:42