How to display JSON nested data in Angular Grid

Question

I am working on Angular 5 application and I got class with following data structure, that I need to display in template, possibly using Angular Kendo UI Grid if not then sample to display in format

I got following class data in json

export class MyClass{
ConsultationId: string;
ResponseType: {
    id: string;
    Name:string;
};
TotalResponses: string;
TotalNewResponses:string;
TotalReviewResponses:string;
TotalCompletedResponses:string;
responsesAbstract: {
    ResponseId: string;
    ConsultationId: string;
    ResponseTypeId:string;
    RespondentId:string;
    ResponseCurrentStatus:string
}

}

screen shot of json data

In attempt to print ResponseType Name by {{MyClass.ResponseType.Name}} but Angular didn't recognise it

Do you have an instance in your component like myClass: MyClass;? Then you only have to call {{myClass.ResponseType.Name}} in your HTML — ochs.tobi
– ochs.tobi, Commented Mar 5, 2018 at 14:39
i have update json out screen shot in my question, and no I don't have myClass:MyClass, — K.Z
– K.Z, Commented Mar 5, 2018 at 14:40
Class has ResponseType property but in object its responseType iin camel case ! — rijin
– rijin, Commented Mar 5, 2018 at 14:46

rijin · Accepted Answer · 2018-03-05 14:49:17Z

1

I think you have to update you class properties based on your data

export class MyClass {
  consultationId: string;
  responseType: {
    id: string;
    name: string;
  };
  totalResponses: string;
  totalNewResponses: string;
  totalReviewResponses: string;
  totalCompletedResponses: string;
  responsesAbstract: {
    responseId: string;
    consultationId: string;
    responseTypeId: string;
    respondentId: string;
    responseCurrentStatus: string;
  };
}

and in component

class Component {
  items: MyClass[] = [];

  assign(data) {
    this.items = data;
  }
}

answered Mar 5, 2018 at 14:49

rijin

1,76714 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

How to display JSON nested data in Angular Grid

screen shot of json data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

screen shot of json data

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related