web-dev-qa-db-fra.com

Typescript/Angular2: Cast JSON pour l’interface avec Observable et JSONP

J'aimerais convertir mon tableau json sur mon interface que j'ai créée et l'afficher dans le navigateur. Je pense qu'il y a probablement quelque chose qui ne va pas dans mon interface, mais je n'arrive pas à le comprendre ... Que dois-je changer pour que mon code fonctionne?

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",
}]

Edites

  1. J'ai vérifié si la requête est correcte dans mon onglet réseau en chrome et si elle fonctionne correctement: 200 OK -> La réponse est également correcte
  2. J'ai édité mon code comme Thierry l'a dit et maintenant, il montre enfin le premier objet de mon tableau :-) !! Mais je reçois maintenant l'erreur suivante:

EXCEPTION non capturée: erreur dans app/html/app.html: 27: 11 EXCEPTION ORIGINALE: RangeError: la date fournie n’est pas dans la plage valide. CACHE ORIGINAL: date n'est pas dans la plage valide. at boundformat (natif) at Function.DateFormatter.format ( http: // localhost: 3000/node_modules/@ angular/common/src/facade/intl.js: 100: 26 ) à DatePipe.transform ( http: // localhost: 3000/node_modules/@angular/common/src/pipes/date_pipe.js : 25: 37 ) À eval ( http: // localhost: 3000/node_modules/@angular/core/src/linker/view_utils.js: 188: 22 ) sur DebugAppView._View_AppComponent1.detectChangesInternal (AppComponent.template.js: 377: 148) sur DebugAppView.AppView.detectChanges ( http: // localhost: 3000/node_modules/@ angular/core/src//view.js:200:14 ) sur DebugAppView.detectChanges ( http: // localhost: 3000/node_modules/@ angular/c ore/src/linker/view.js: 289: 44 ) sur DebugAppView.AppView.detectContentChildrenChanges ( http: // localhost: 3000/node_modules/@ angular/core/src/linker/view .js: 215: 37 ) sur DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js: 198: 8) sur DebugAppView.AppView.detectChanges http: // localhost : 3000/node_modules/@angular/core/src/linker/view.js: 200: 14 ) CONTEXTE D'ERREUR: [Objet Objet]

typescriptangularjsonprxjsobservable
7
safari

Vous pouvez essayer ce qui suit à la place:

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

Modifier

Je pense que votre demande ne renvoie pas de contenu JSONP mais classique (JSON). Si oui, vous pouvez essayer les solutions suivantes:

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);
5
Thierry Templier

Essayez d’utiliser une classe au lieu d’une interface. Dans ce cas, video.model.ts serait:

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

J'ai donné une présentation de TypeScript récemment, cela m'a rappelé ce que les titres de la diapositive "Il n'y a pas d'interface!" Dans TypeScript lorsque vous définissez une interface, la compilation est pratiquement nulle. Ce qui peut être un peu trompeur. Je pense comprendre ce que vous essayez de faire:

Le problème est la façon dont l'objetJSONPrevient, il est rempli. Donc, il se trouve dans l'index [1]. Essayez ceci à la place:

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