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

Answer 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;
  }
}