Why does my JSON not load in Angular 2 -
i trying load json data angular 2 component, getting error of 'unexpected token :' seems not understand json data is.
i have tried complete 'simple' task many times yet have yet been unable so, hope can somewhere time communities help...
here code:
index.html
<!doctype html> <html> <head> <script>document.write('<base href="' + document.location + '" />');</script> <title>angular 2 quickstart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <!-- 1. load libraries --> <!-- ie required polyfills, in exact order --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_ie.js"></script> <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="node_modules/angular2/bundles/http.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <!-- 2. configure systemjs --> <script> system.config({ transpiler: 'typescript', typescriptoptions: { emitdecoratormetadata: true }, packages: { app: { // must match folder name format: 'register', defaultextension: 'js' } } }); system.import('app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. display application --> <body> <my-app>loading...</my-app> </body> </html> main.ts
import {bootstrap} 'angular2/platform/browser'; import {http, http_providers} 'angular2/http'; import {appcomponent} './app.component'; import { peopleservice } './people.service'; import 'rxjs/rx'; bootstrap(appcomponent, [http_providers,peopleservice]); app.component.ts
import {component} 'angular2/core'; import {listcomponent} './list.component'; @component({ selector: 'my-app', directives : [listcomponent], template: '<h1>{{applicationtitle}}</h1><my-list></my-list>' }) list.component.ts
import {component} 'angular2/core'; import {http_providers} 'angular2/http'; import {peopleservice} './people.service' import {person} './person' @component({ selector: 'my-list', providers: [ http_providers, peopleservice, ], template: ` <h2>this list component</h2> <div *ngfor="#person of people"> <h2>{{person.name}}</h2> <h3>{{person.age}}</h3> </div> ` }) export class listcomponent { people : array<person> constructor(private _personservice:peopleservice) { _personservice.getpeople() .subscribe(response => this.people = response); } } people.service.ts
import {injectable} 'angular2/core'; import {http, response} 'angular2/http'; import {person} './person'; import {observable} 'rxjs/observable'; @injectable() export class peopleservice { constructor(private http: http) { } private dataurl = './app/people.json'; getpeople(): observable<person[]> { return this.http.get(this.dataurl) .map(this.onsuccess) .catch (this.onfail); } private onsuccess(res: response) { if (res.status < 200 || res.status >= 300) { throw new error('bad response status: ' + res.status); } let body = res.json(); return body.data || { }; } private onfail(error: any) { let errmsg = error.message || 'server error'; console.error(errmsg); return observable.throw(errmsg); } } person.ts
export class person() { age: number; name: string; } people.json
"people":[ { age: 40, name: "jordan houston" }, { age: 38, name: "robert eastham" }, { age: 23, name: "josh beh" }, { age: 23, name: "joseph canina" }, { age: 24, name: "alexandra wilkins" }, { age: 22, name: "kiersten costanzo" }, { age: 23, name: "ku sherwood" }, { age: 25, name: "arta halili" }, { age: 24, name: "patrick cooney" }, { age: 23, name: "z.a. perr" }, { age: 18, name: "tyler mulligan" }, { age: 26, name: "dennis dempsey" }, { age: 32, name: "francis yeager" }, { age: 23, name: "phil belardi" } ] the actual error follows:
people.service.ts:32 unexpected token :system.register.context_1.execute.peopleservice.onfail @ people.service.ts:32catchsubscriber.error @ rx.js:3239mapsubscriber._next @ rx.js:5041subscriber.next @ rx.js:10667onload @ http.dev.js:660zonedelegate.invoketask @ angular2-polyfills.js:365ngzoneimpl.inner.inner.fork.oninvoketask @ angular2.dev.js:2103zonedelegate.invoketask @ angular2-polyfills.js:364zone.runtask @ angular2-polyfills.js:263zonetask.invoke @ angular2-polyfills.js:431 angular2.dev.js:23887 exception: unexpected token : my apologies formatting on error
changing json format following
{ "people":[ { "age": 40, "name": "jordan houston" }, { "age": 38, "name": "robert eastham" }, { "age": 23, "name": "josh beh" }, { "age": 23, "name": "joseph canina" }, { "age": 24, "name": "alexandra wilkins" }, { "age": 22, "name": "kiersten costanzo" }, { "age": 23, "name": "ku sherwood" }, { "age": 25, "name": "arta halili" }, { "age": 24, "name": "patrick cooney" }, { "age": 23, "name": "z.a. perr" }, { "age": 18, "name": "tyler mulligan" }, { "age": 26, "name": "dennis dempsey" }, { "age": 32, "name": "francis ye"age"r" }, { "age": 23, "name": "phil belardi" } ] } changes error :
angular2.dev.js:23877 exception: unexpected token a
you json content isn't well-formed. should use this:
{ "people":[ { "age": 40, "name": "jordan houston" }, (...) ] } don't forget " around property names.
Comments
Post a Comment