Menu
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>
286
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.
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.
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
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.
If you want to see json, you just need to do this:
people: {{people | json}}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
