Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular2 print json from service

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>
like image 286
stackdave Avatar asked Feb 06 '16 16:02

stackdave


People also ask

Can I use JSON pipe in angular?

So, json pipe will not work in Angular application. you can use the below JSON stringify way of using the circular object. When you are using json pipe, You used to get the following errors.

How to send the data to the service of JSON format?

Sometimes, we have a situation, in which we should send the data to the service of JSON format. For that, we can create a dummy data to test the API and can send it to the service by converting into JSON format like in the given example. For that, we can use a method JSON.stringify (), which is used to convert the object data into the JSON format.

How to create a student app in Angular 2?

1 Create New App In this step, we will use the following command in our terminal or command prompt to create our angular app. ng new my-app 2 Create JSON File In this step, we will add some records of students. ... 3 Update Ts file In this step, we will use the Student interface to create an array of student objects. ... 4 Template code

How do I create a website using Angular 2?

Create a new website. Provide the name and the location of the website. Click "Next". After adding all mandatory Angular 2 files, add a new TypeScript file. } // This is just a sample script. Paste your real code (javascript or HTML) here. Now, add a demo JSON file and add some data.


1 Answers

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

people: {{people | json}} 
like image 116
pixelbits Avatar answered Oct 10 '22 11:10

pixelbits