Угловой 2: Получите содержимое JSON из ответа HTTP

Question

Я получил объект JSON (я думаю) из своего HTTP-сервиса, но изо всех сил стараюсь вытащить строки.

https://jsonplaceholder.typicode.com/posts/1 дает мне

{ 
    "userId": 1, 
    "id": 1, 
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", 
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" 
} 

Мой код: настроить службу:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class MyNewServiceService { 

    constructor(private http: Http) {} 
     getHTTP() { 
     return this.http.get('https://jsonplaceholder.typicode.com/posts/1').map(
      response => response.json()); 
    } 
} 

Вызывается это от моего app.component, пытаясь и не суметь tooutput на экран с помощью заголовка.

import { Component} from '@angular/core'; 
import { MyNewServiceService } from './my-new-service.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [MyNewServiceService] 
}) 
export class AppComponent { 
    title = 'app works!'; 

    constructor(MyNewServiceService: MyNewServiceService){ 
    MyNewServiceService.getHTTP() 
     .subscribe(
     JSONtitle => this.title = JSONtitle, 
     error => console.error('Error: ' + error), 
     () => console.log('Completed!') 

    ); 
    } 
} 

В итоге я вывел [object Object] на экран.

Я попытался вывести его на консоль, но получил «неопределенный», считая, что служба еще не завершена в режиме angular2. Таким образом, я создал новый класс и попытался бросить с ним, но не повезло

export class JsonResponseClass { 
    constructor(
    public userid:number, 
    public id:string, 
    public title:string, 
    public body:string 
    ) 
    {} 
} 

Шаблон прост ...

<h1> 
    {{title}} 
</h1> 

Как я получить мои строки из JSON?

Answer 1

Вы возвращаете тело ответа в качестве результата преобразования из службы. Костюмные ситуации, вы можете получить доступ необходимых свойств в компоненте следующим образом:

constructor(MyNewServiceService: MyNewServiceService){ 
    MyNewServiceService.getHTTP() 
     .subscribe(
     resBody => this.title = resBody.title, 
     error => console.error('Error: ' + error), 
     () => console.log('Completed!') 
    ); 
    } 

Btw, конвенция говорит нам keep instance variables camelCased, так что вы можете отличить экземпляр от самого класса:

constructor(private myNewServiceService: MyNewServiceService){ 
    myNewServiceService.getHTTP() 
     .subscribe(
     resBody => this.title = resBody.title, 
     error => console.error('Error: ' + error), 
     () => console.log('Completed!') 
    ); 
    }