Получение JSON-данных через http: пустой ответ

Question

Я новичок в Angular2, и мне почему-то очень сложно понять, как работает http в Angular2. Я создал простой компонент, который должен отображать ответ json. Это не работает, и я понятия не имею, почему. Я проверил множество учебников и попробовал его с обещаниями, а также с наблюдаемыми. Не работает. Я просто не могу получить данные ответа.

Мой код:

private doAction() { 
    this.doHttpRequest().subscribe(
     data => this.content = data 
    ); 
    this.content = JSON.stringify(this.content); 
    } 

    private doHttpRequest() { 
    return this.http.get('http://jsonplaceholder.typicode.com/posts/1') 
        .catch(this.handleError); 
    } 

this.content будет связываться с моим шаблоном. Когда я нажимаю кнопку, чтобы начать doAction() на секунду, я вижу «» в шаблоне, после другой секунды [object Object]

В чем проблема?

Answer 1

Это ожидаемое поведение

private doAction() { 
    // schedule HTTP call to server and subscribe to get notified when data arrives 
    this.doHttpRequest().subscribe(
     // gets called by the observable when the response from the server aarives 
     data => this.content = data 
    ); 
    // execute immediately before the call to the server was even sent 
    this.content = JSON.stringify(this.content); 
    } 

Чтобы исправить это изменить его

private doAction() { 
    this.doHttpRequest().subscribe(
     data => { 
     //this.content = data; 
     this.content = data.json()); 
     }); 
    ); 
    } 

Если вы хотите код, который будет выполняться после того, как прибыл данные, то вам необходимо переместить его внутри subscribe(...) обратного вызова.

Answer 2

Поскольку запросы НТТР асинхронный вы должны положить всю свою логику в зависимости от результатов вызова HTTP в subscribe() обратного вызова, как это:

private doAction() { 
    this.doHttpRequest().subscribe(
    data => { 
     this.content = data; 
     // any more logic must sit in here 
    } 
); 
} 

private doHttpRequest() { 
    return this.http.get('http://jsonplaceholder.typicode.com/posts/1') 
       .map(res => res.json()); 
       .catch(this.handleError); 
} 

Answer 3

Http вызов возвращает данные, так как он показывает «[объект Object ] "в шаблоне. Если вы хотите увидеть json-данные в шаблоне, вы можете использовать json-канал, как показано ниже.

{{content | json}}

PS: Нет необходимости в this.content = JSON.stringify (this.content); " в вашем коде.