How can we efficiently assign an array of JSON responses using Observables and map within a TypeScript interface, and then display it in HTML using *ngFor in Angular 2?

Question

How can we efficiently assign an array of JSON responses using Observables and map within a TypeScript interface, and then display it in HTML using *ngFor in Angular 2?

export interface Relation{
name: string;
address: string;
dob: number;
}

The JSON response I received is as follows:

[ {"name":"John", "address":"xyz", "dob":"2000-01-10"},
{"name":"Jamie", "address":"abc", "dob":"1990-01-10"}
]

The issue seems to be with mapping the response to the Interface.

relations:Relation []=[];
getRelations() : Observable<Relation[]> {
   return this.http.get('url for json response').map(this.extractData).do(data=>console.log("Get all responses"+JSON.stringify(data))).catch(error => this.errorMessage = error);
}

extractData( response : Response){
let body = response.json();
console.log("Body", body);
return body.data;
}

When calling the getRelations method, it returns nothing.

ngOnInit(){
   this.getRelations().subscribe(relations=> relations, error=> this.errorMessage=<any>error);
}

Trying to display the data in HTML as table rows does not show anything. This indicates a problem either with initializing the Relation[] array or missing some key information.

Displaying the data using ngFor loop also does not work.

<tr *ngFor="let row of relations"> 
<td> {{row.name}} </td>
<td> {{row.address}} </td>
<td> {{row.dob}} </td>
</tr>

javascript json angular typescript

Answer 1

Answer №1

One issue is that the response lacks an object named data, instead it's just an array. Therefore, you should modify your extractData function to either return the response as-is or an empty array:

extractData( response : Response){
  let body = response.json();
  console.log("Body", body);
  return body || []; // Adjust here!
}

In addition, make sure to assign the data to a variable in your component:

this.getRelations()
  .subscribe(relations=> {
     this.relations = relations
  });

Furthermore, remember to use interpolation {{ }} in your template to display the objects and their properties:

<table>
  <tr *ngFor="let row of relations"> 
    <td>{{row.name}}</td>
    <td>{{row.address}}</td>
    <td> {{row.dob}}</td>
  </tr>
</table>

It appears that you are handling everything in the component, while typically we use a service to manage HTTP requests and mapping, with the component simply subscribing.

Service:

@Injectable()
export class Service {

  constructor(private http: Http) { }

  getRelations() : Observable<Relation[]> {
    return this.http.get('url')
     .map(this.extractData)
     .catch(error => console.log(error));
  }

  extractData( response : Response){
    let body = response.json();
    console.log("Body", body);
    return body || [];
  }

}

and in component:

constructor(private service: Service){}

ngOnInit(){
  this.service.getRelations().subscribe(relations=> {
    this.relations = relations;
  });
}

DEMO

Answer 2

One issue is that the response lacks an object named data, instead it's just an array. Therefore, you should modify your extractData function to either return the response as-is or an empty array:

extractData( response : Response){
  let body = response.json();
  console.log("Body", body);
  return body || []; // Adjust here!
}

In addition, make sure to assign the data to a variable in your component:

this.getRelations()
  .subscribe(relations=> {
     this.relations = relations
  });

Furthermore, remember to use interpolation {{ }} in your template to display the objects and their properties:

<table>
  <tr *ngFor="let row of relations"> 
    <td>{{row.name}}</td>
    <td>{{row.address}}</td>
    <td> {{row.dob}}</td>
  </tr>
</table>

It appears that you are handling everything in the component, while typically we use a service to manage HTTP requests and mapping, with the component simply subscribing.

Service:

@Injectable()
export class Service {

  constructor(private http: Http) { }

  getRelations() : Observable<Relation[]> {
    return this.http.get('url')
     .map(this.extractData)
     .catch(error => console.log(error));
  }

  extractData( response : Response){
    let body = response.json();
    console.log("Body", body);
    return body || [];
  }

}

and in component:

constructor(private service: Service){}

ngOnInit(){
  this.service.getRelations().subscribe(relations=> {
    this.relations = relations;
  });
}

DEMO

Answer 3

Answer №2

The code provided in your query contains errors in implementing ngFor syntax. Please refer to the official documentation for a better understanding.

Visit this link for detailed information on ngFor usage

Answer 4

The code provided in your query contains errors in implementing ngFor syntax. Please refer to the official documentation for a better understanding.

Visit this link for detailed information on ngFor usage

Answer 5

Answer №3

Update your user interface to:

export interface Connection{
username: string;
location: string;
birthdate: string;
}

birthdate should be of type string, not number.

In addition, like Ben mentioned, make sure you either assign the response to connections, or ensure that part of the code is included.

Answer 6

Update your user interface to:

export interface Connection{
username: string;
location: string;
birthdate: string;
}

birthdate should be of type string, not number.

In addition, like Ben mentioned, make sure you either assign the response to connections, or ensure that part of the code is included.

How can we efficiently assign an array of JSON responses using Observables and map within a TypeScript interface, and then display it in HTML using *ngFor in Angular 2?

Answer №1

Answer №2

Answer №3

Similar questions

The File is not being successfully sent to the controller in MVC due to AJAX returning an undefined value

Separating text for tooltips from the element itself

What is preventing me from refreshing my customized list view using the API?

Unable to clone curved text in fabric.js version 5.3.0

Is there a way for me to receive the response from the this.$store.dispatch method in vue.js 2?

Preserve Text Selection While Utilizing DIV as a Button

"Stellar.js fails to function properly when applied to elements loaded dynamically through AJAX requests

Is it possible to receive returned string values using fetch()?

Tips for speeding up the loading of JSON with large data on HTTP requests or webpages

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

Shutting down the jQuery pop-up

Alternate CSS options for controlling printing besides page-break-after and page-break-before

The CORS Policy has prevented Angular from accessing the header, as the request header field for authentication is restricted

What is the proper way to convert nil to JSON as nil, without representing it as an empty value?

One way to dynamically track if any radio buttons in a group have been selected is by utilizing JQuery

Tips for integrating an express-ws route

What does the error message "TypeError: Bad argument TypeError" in Node's Child Process Spawn mean?

Fatal error: The street number index is not defined

Troubleshooting Angular 2: Why Array Interpolation is Failing

Encountering an 'undefined' property error when clicking a button in Angular 1.x