Getting error in accessing Interface in Angular

Question

I am trying my best but getting error of type in accessing the data. Help needed.

I have a json as below

[{
  "productType": "Electronics",
  "modelDetails": [
    {
      "modelId": "I Kall K 48",
      "modelPrice": 759,
      "specifications": {
        "memory": "32 MB RAM | 64 MB ROM",
        "display": "4.57 cm (1.8 inch) Display",
      }
    }, 
    {
      "modelId": "I Kall K 48",
      "modelPrice": 759,
      "specifications": {
        "memory": "32 MB RAM | 64 MB ROM",
        "display": "4.57 cm (1.8 inch) Display",
      }
    }
  ]
}]

Below is my ts file with defined Interface.

import { Component, OnInit } from '@angular/core';

import productsData from './jsonFile3.json';

interface Product {
    productType: String,
    modelDetails: ModelDetails
}

interface ModelDetails {
    modelId: String,
    modelPrice: Number,
    specifications:Specifications
}

interface Specifications {
  memory: String,
  display: String,
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'ngapplication';
  name = 'Angular';
  products: Product[] = productsData;
}

I am getting error as

error TS2322: Type '{ productType: string; modelDetails: { modelId: string; modelPrice: number; specifications: { memory: string; display: string; }; }[]; }; }[]' is not assignable to type 'Product[]'.

Also, if there is only single data in modelDetails then it is captured but when it becomes an array of object then even after declaring modelDetails: ModelDetails[], still it is not rendered.

Can anyone help me out in this ??

Thanks

modelDetails in the Product interface should be an array. modelDetails: ModelDetails[] — Jacopo Sciampi
– Jacopo Sciampi, Commented Feb 15, 2022 at 9:57
With modelDetails: ModelDetails[] in Product, I cannot replicate your error: stackblitz.com/edit/angular-ivy-pmsod5?file=src/app/… — Barremian
– Barremian, Commented Feb 15, 2022 at 10:18
@ruth : in your approach you hardcoded the data in a const variable in ts itself. But actually the data is being referred from json file externally. Could you please check it out for external json file ? — Abhijeet Kumar
– Abhijeet Kumar, Commented Feb 15, 2022 at 17:30
@AbhijeetKumar: Here is a working example with imported object from a JSON file: stackblitz.com/edit/angular-ivy-zp4zej?file=tsconfig.json. For this to work, you'd need to set two properties in the tsconfig.json file. See here: medium.com/codeptivesolutions/… — Barremian
– Barremian, Commented Feb 16, 2022 at 8:46
None of the solutions provided are working. The 2 properties for tsconfig.json are already there. What I found is, if modelDetails is having only single item inside it without [ ], then it is working fine, but once [ ] appears it fails. — Abhijeet Kumar
– Abhijeet Kumar, Commented Feb 18, 2022 at 9:28

omercikayse · Accepted Answer · 2022-02-15 13:55:41Z

1

You need to define like;

interface Product {
    productType: String,
    modelDetails: ModelDetails[]
}

Because in JSON your ModelDetails is an array.

answered Feb 15, 2022 at 13:55

omercikayse

214 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abhijeet Kumar Over a year ago

I have already tried this. In this case the error says property does not exists... I am missing something minor but unable to figure it out.

Chris Hamilton Over a year ago

@AbhijeetKumar please show the new error message.

Abhijeet Kumar Over a year ago

@ChrisHamilton : here it is Error: src/app/app.component.html:18:34 - error TS2339: Property 'modelId' does not exist on type 'ModelDetails[]'. 18 <div>{{product.modelDetails.modelId}}</div> src/app/app.component.ts:47:16 47 templateUrl: './app.component.html', Error occurs in the template of component AppComponent. .... Likewise, for every item it is giving the same error.

Chris Hamilton Over a year ago

@AbhijeetKumar As the error message says, you are trying to access a property of the array, you've forgotten to index into the array. Something like product.modelDetails[0].modelId, or use an ngFor to loop through. If you add your html to the question we can probably help.

Abhijeet Chalke · Accepted Answer · 2022-02-15 10:12:13Z

0

Here 'productsData' you are accessing is the object and you are directly trying to assign it to array based variable 'products'. thats why it shows you error. I think you should push 'productsData' as element of array like array.push(productsData). at least try it.

answered Feb 15, 2022 at 10:12

Abhijeet Chalke

213 bronze badges

2 Comments

Abhijeet Chalke Over a year ago

above solution also applied for modelDetails: ModelDetails[] in Product

Abhijeet Kumar Over a year ago

I didn't get it. Can you please provide details on how to make this happen ?

Abhijeet Kumar · Accepted Answer · 2022-02-24 10:07:44Z

0

Finally, With a combination of Hit-n-Trial method and based on the above response of @Chris, I was able to resolve it. Below is the solution that I applied :

In ts file, ModelDetails defined as array interface :

 interface Product {
     productType: String,
     modelDetails: ModelDetails[];
 }

 interface ModelDetails {
     modelId: String,
     modelPrice: Number
 }

And in HTML file, rendering part is as below :

 <div *ngFor="let modelDetail of product.modelDetails">
     <div class="modelId">{{modelDetail.modelId}}</div>
     <div class="modelPrice">{{modelDetail.modelPrice}}</div>
 </div>

Thanks Everyone for your replies and help.

answered Feb 24, 2022 at 10:07

Abhijeet Kumar

11 bronze badge

Collectives™ on Stack Overflow

Getting error in accessing Interface in Angular

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related