angular2 print json from service

Question

I don't know how to get the data from JSON printed in my template

if i use in template: template: people: {{people}} or template: people: {{articles}}
always get in the browser:

people: [object Object]

if i use in template: template: people: {{people.totalrecords}} or template: people: {{articlestotalrecords}}

in get blank value: people:

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

@Injectable()
class ArticleApi {
  constructor(private http: Http) {}
  getData: string;

  seachArticle(query) {
    const endpoint = 'http://xdemocrm.com/webservicecrm.php';
    const searchParams = new URLSearchParams()
    searchParams.set('object', 'account');
    searchParams.set('action', 'list');   
    return this.http
      .get(endpoint, {search: searchParams})
      .map(res => res.json())
  }

  postExample(someData) {
    return this.http
      .post('https://yourEndpoint', JSON.stringify(someData))
      .map(res => res.json());
  }
}

@Component({
  selector: 'app',
  template: `people: {{people}}`, 
  providers: [HTTP_PROVIDERS, ArticleApi],
})
class App implements OnInit {
  public people;
  constructor(private articleApi: ArticleApi) { }
  public articles: Array<any> = [];

  ngOnInit() {
    this.articles = this.articleApi.seachArticle('obama')
        .subscribe (data => this.people = data) 
  }
}

bootstrap(App)
  .catch(err => console.error(err));

<!DOCTYPE html>
<html>
<head>
  <title>angular2 http exmaple</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="config.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.1/http.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>
<body>
  <app>loading...</app>
</body>
</html>

Michael Kang · Accepted Answer · 2016-02-07 01:54:20Z

27

If you want to see json, you just need to do this:

people: {{people | json}}

answered Feb 7, 2016 at 1:54

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-02-06 16:12:10Z

9

I guess you need

{{people?.totalrecords}}

to make it work.

You fetch the data before Angular renders the view, but the response probably arrives afterwards.

With ?. angular doesn't evaluate .totalrecords while people is null.

answered Feb 6, 2016 at 16:12

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

stackdave Over a year ago

thanks! so I must use for security always ? in my templates? what about when i have just not an value , can i use {{?totalrecords}} , thanks!

Günter Zöchbauer Over a year ago

When people is undefined or null people.totalrecords throws because null doesn't have a totalrecords property. You only need ?. when the part before it can become undefined or null. If you assign an initial value to people (for example in the constructor) you don't need .?. Otherwise people is undefined until the value from the server arrives. people?.totalrecords is a short form of people ? people.totalrecords : null

Melchia · Accepted Answer · 2018-07-05 08:35:05Z

0

If you want something more elegant you can use the HTML <pre> Tag:

<pre> {{people | json}} </pre>

answered Jul 5, 2018 at 8:35

Melchia

24.6k23 gold badges110 silver badges130 bronze badges

Collectives™ on Stack Overflow

angular2 print json from service

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related