Show response from an Http.get in Angular2

Question

Show response from an Http.get in Angular2

Navigation

#1 by (2 votes)

4

I am trying to learn Typescript and Angular2 . What I do is consult a public service when I click and print the note, but I'm getting the following error:

Cannot read property 'quotes' of undefined in [{{quote.contents.quotes.quote}} in App@4:20]

My Component.ts

import {Component, OnInit, Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS, URLSearchParams} from 'angular2/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app',
  template: '<ul>
                <li (click)='myAlert()'> Helow World</li>
             </ul>
             <div>
              <spam>{{quote.contents.quotes.quote}}</spam>
             </div>',
  providers: [HTTP_PROVIDERS]
})

export class App {
  public quote: Object;
  public  logError: string;

  constructor(private http: Http){
    this.quote = {};
  }

  myAlert(){
      this.http.get("http://quotes.rest/qod.json").map(res => { return res.json()})
        .subscribe(
          data => this.quote = data,
          err => this.logError(err),
          () => console.log('Random Quote Complete')
      );

  }
}

My boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {App} from './component'
import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(App, [HTTP_PROVIDERS]).catch(err => console.error(err));

Index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>


    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
  </body>

</html>

How do I get the service response in the subscriber and place it in the template?

typescript angularjs-2.0 system.js

asked by Wilfredo 31.01.2016 в 16:43

source

1 answer

Forbidden, error 403 with Apache / 2.4.6 Disable days in a datepicker if records already exist

score 2 · Accepted Answer

The error occurs because, before obtaining the server data, the quote property of your component has an empty object and the value of quote.contents is undefined

I think you could solve it by saving the quote text directly in that property.

The code of the myAlert method would look like this:

myAlert(){
  this.http.get("http://quotes.rest/qod.json").map(res => { return res.json()})
    .subscribe(
      data =>  this.quote = data.contents.quotes[0].quote,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

And in the template you would use it like this: <spam>{{quote}}</spam>