How to fetch a particular data from database using Angular Observer

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.