How to fetch a particular data from database using Angular Observer - html

Question

In the input box when I enter 'Title' i should get the list of the title but when I run this I get the list of [object Object][object Object][object Object]...
Here is the API
https://jsonplaceholder.typicode.com/posts
I need to get the particular information
HTML
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<input type="text" #name>
<button class="btn btn-primary" (click)="onGet(name.value)">Add Server</button>
<p>{‌{ servers }}</p>
</div>
</div>
</div>
COMPONENT.TS
import { Component } from '#angular/core';
import {ServerService} from "./server.service";
#Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css'],
providers: [ServerService]
})
export class ListComponent {
servers = [];
constructor(private serverService: ServerService) {}
onGet(name: string) {
this.serverService.getServers( name )
.subscribe(
(servers: any[]) => this.servers = servers,
(error) => console.log(error)
);
}
}
SERVICE.TS
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import {map} from "rxjs/operator/map";
#Injectable()
export class ServerService {
constructor(private _http: Http) {}
getServers(name: string) {
console.log(name);
return this._http.get('https://jsonplaceholder.typicode.com/posts' )
.map(
(response: Response) => {
const data = response.json();
console.log(data)
return data.name;
}
)
}
}
Please help me with this.

Answer 1

Update you service as following:
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import {map} from "rxjs/operator/map";
#Injectable()
export class ServerService {
constructor(private _http: Http) {}
getServers(name: string) {
console.log(name);
return this._http.get('https://jsonplaceholder.typicode.com/posts' )
.map(
(response: Response) => {
const data = response.json();
console.log(data)
return data;
}
)
}
}
Here data is returned instead of data.name. As data is an array of object there is no property "name" in data. "name" is an property of it's item.
And template should be:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<input type="text" #name>
<button class="btn btn-primary" (click)="onGet(name.value)">Add Server</button>
<div *ngFor="let server of servers">
<p *ngIf="name.value == 'title'">{{server.title}}</p>
<p *ngIf="name.value == 'id'">{{server.id}}</p>
<p *ngIf="name.value == 'userId'">{{server.userId}}</p>
<p *ngIf="name.value == 'body'">{{server.body}}</p>
</div>
</div>
</div>
</div>
Then it will show the list of title.

Answer 2

The value you try to interpolate in your template is an Array (servers). When you try to interpolate reference type objects in Angular templates, you will get the string representation of them (interpolation uses toString()), so, [object Object] or [object Array]. If you want to see the object in plain text inside a template, consider using the json pipe, like this: <p>{‌{ servers | json }}</p>, but most probably you will want to use ngFor and unwrap the objects inside the array, like this, probably: <p *ngFor="let server of servers">{{ server.title}}</p>, for example. Read more about json pipe and ngFor here and here