Typescript / Angular2: enable JSON to interact with Observable & JSONP

Question

I would like to draw my json array for my interface that I created and would like to display it in a browser. I think that maybe something is wrong with my interface, but I can’t figure it out ... What do I need to change to run my code?

Interface:

export interface Video { id: number; name: string; description: string; createdAt: string; } 

app.ts

 import {JSONP_PROVIDERS, Jsonp} from '@angular/http'; import {Observable} from '../../../node_modules/rxjs'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/share'; import {Video} from './networking/api'; private videoData: Observable<Video[]>; ngOnInit() { this.displayNewstVideo(10); } private displayNewstVideo(count: number) { this.videoData = this.jsonp .get('localhost:8080/video/newst/' + count + '?jsonp=JSONP_CALLBACK') .map(res => (res.json() as Video[])); alert(this.videoData.count); } 

app.html

 <div class="container"> <div class="video" style="font-family:sans-serif" *ngFor="#entry of videoData | async; #i = index"> <br *ngIf="i > 0" /> <span class="title" style="font-size:1.2rem"> <span>{{i + 1}}. </span> <a href={{entry.urlDesktop}}>{{entry.name}}</a> </span> <span> ({{entry.description}})</span> <div>Submitted at {{entry.createdAt * 1000 | date:"mediumTime"}}.</div> </div> 

Json

 [{ id: 1, name: "Some Name", description: "BlaBla", createdAt: "2016-05-04 13:30:01.0", }, { id: 2, name: "Some Name", description: "BlaBla", createdAt: "2016-05-04 13:30:01.0", }] 

edits

• I checked the correctness of the request on my tab in chrome and it works except as follows: 200 OK -> Response ist is also excellent

• I edited my code as Thierry stated, and now it finally shows the first object in my array :-) !! But now I get the following error:

  Impossible EXCLUSION: Error in app / html / app.html: 27: 11 ORIGINAL EXCLUSION: RangeError: the provided date does not match the valid range. ORIGINAL GLASS: RangeError: the provided date does not match the valid range. in boundformat (native) in Function.DateFormatter.format ( http: // localhost: 3000/node_modules/@angular/common/src/facade/intl.js: 100: 26 ) in DatePipe.transform ( http: // localhost: 3000/node_modules/@angular/common/src/pipes/date_pipe.js: 25: 37 ) at eval ( http: // localhost: 3000/node_modules/@angular/core/src/linker/view_utils.js: 188: 22 ) in DebugAppView._View_AppComponent1.detectChangesInternal (AppComponent.template.js: 377: 148) in DebugAppView.AppView.detectChanges ( http: // localhost: 3000/node_modules/@angular/core/src/linker/view.js: 200: 14 ) in DebugAppView.detectChanges ( http: // localhost: 3000/node_modules/@angular/core/src/linker/view.js: 289: 44 ) in DebugAppView.AppView.detectContentChildrenChanges ( http: // localhost: 3000 / node_modules /@angular/core/src/linker/view.js:215:37 ) in DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js: 198: 8) in DebugAppView.AppView.detectChanges ( http: // localhost: 3000 / node_modules/@angular/core/src/linker/view.js : 200: 14 ) ERROR CONTROL: [object Object]

Answer 1

Instead, you can try the following:

 this.videoData = this.jsonp .get('localhost:8080/video/newst/' + count + '?jsonp=JSONP_CALLBACK') .map(res => <Video[]>res.json(); 

Edit

I think your request does not return JSONP content, but classic (JSON). If so, you can try the following:

 import { bootstrap } from 'angular2/platform/browser'; import { Component } from 'angular2/core'; import { HTTP_PROVIDERS, Http } from 'angular2/http'; import "rxjs/add/operator/map"; @Component({ selector: "app", templateUrl: "app.html", providers: [HTTP_PROVIDERS] }) class App { private feedData: Observable<Video[]>; constructor(private http: Http) { } ngOnInit() { this.displayNewstVideo(10); } private displayNewstVideo(count: number) { this.videoData = this.http .get('localhost:8080/video/newst/' + count) .map(res => (res.json() as Video[])) .do(videoData => { console.log(videoData); }); } } bootstrap(App); 

Answer 2

Try using a class instead of an interface, so in this case video.model.ts will be:

 export class Video { constructor( public id: number, public name: string, public description: string, public createdAt: string){} } 

Answer 3

I recently presented a TypeScript presentation, it reminded me that from the slides "No interface!" In TypeScript , when you define an interface , it actually compiles to zero. Which may be somewhat deceiving. I think I understand what you are trying to do:

The problem is that the JSONP object is returned, it is padded. Thus, it is in the index [1] . Try instead:

 this.videoData = this.jsonp .get('localhost:8080/video/newst/' + count + '?jsonp=JSONP_CALLBACK') .map(res => <Video[]>res.json()[1]);