How to parse a Java object which contains a list of a custom java POJO from REST Api call in component.ts file in angularJs

Question

I am new to angular. I stuck to parse the response from the Java REST service to my angular UI. I can see the expected list came from REST API call in Network tab of inspector but not able to parse it to my respective component.ts file in angular. I am getting Response is undefined in console log of UI. Below are the details REST API Response Object

public FinalResponse(int statusCode, String statusMessage, Object objects) {
        super();
        this.statusCode = statusCode;
        this.statusMessage = statusMessage;
        this.objects = objects; // This Object holds the Array List of Persons Object 
    }

In My componet.ts file, I used below code

export class Person {
  constructor( public personId: number, public personName: string,){
  }
}

export class FinalResponse {
 
  constructor( public statusCode: number, public statusMessage: string, 
      public objects:any){

  }
}

export class PersonListComponent implements OnInit {
  
  persons: Person[]
  message: string
  finalResponse: FinalResponse


  constructor(private personDataService: PersonDataService, private router: Router,
    private route: ActivatedRoute) { 
    }

  ngOnInit() {
    this.refreshPersonList();
  }

  refreshPersonList(){
    this.personsDataService.retrieveAllPersons().subscribe(
      response =>{
        console.log("Backend service response"+response)
        this.finalResponse =response;
        this.persons = this.finalResponse.objects
        console.log("Backend service response1 "+this.persons)
        console.log("Backend service response1 "+this.finalResponse.statusCode)
        console.log("Backend service response1 "+this.finalResponse.statusMessage)
        console.log("Backend service response1 "+this.finalResponse.objects)
      }
    ); 
  } 
}

Here I can see the status code & status message perfectly but am not able to see the List of Person object. In the UI console log, I can see it is undefined. Can anyone please help me with this? Thanks in advance, any advice is highly appreciated.

Answer 1

you are assinging wrongly from the response first. data keyword is needed for accessing the response data. try this: this.persons = this.finalResponse.data.objects

Here it is:

this.personsDataService.retrieveAllPersons().subscribe(
      response =>{
        console.log("Backend service response"+response)
        this.finalResponse =response;
        this.persons = this.finalResponse.data.objects
        console.log("Backend service response1 "+this.persons)
        console.log("Backend service response1 "+this.finalResponse.statusCode)
        console.log("Backend service response1 "+this.finalResponse.statusMessage)
        console.log("Backend service response1 "+this.finalResponse.objects)
      }
    );