webentwicklung-frage-antwort-db.com.de

Typescript/Angular2: Umsetzen von JSON auf Observable & JSONP

Ich möchte mein Json-Array in meine von mir erstellte Oberfläche einfügen und es im Browser anzeigen. Ich denke, dass mit meiner Schnittstelle wahrscheinlich etwas nicht stimmt, aber ich kann es nicht herausfinden ... Was muss ich ändern, damit mein Code läuft?

Schnittstelle:

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

Bearbeitungen

  1. Ich habe in Chrome überprüft, ob die Anfrage in meinem Netzwerk-Tab korrekt ist, und es funktioniert wie erwartet: 200 OK -> Antwort ist auch in Ordnung
  2. Ich habe meinen Code so editiert, wie Thierry es herausgegeben hat, und jetzt wird endlich das erste Objekt in meinem Array angezeigt :-) !! Ich bekomme aber folgenden Fehler:

Nicht erfasste AUSNAHME: Fehler in app/html/app.html: 27: 11 ORIGINAL AUSNAHME: RangeError: Das angegebene Datum liegt nicht im gültigen Bereich. ORIGINAL STACKTRACE: RangeError: Bereitgestellt Datum ist nicht im gültigen Bereich. um boundformat (native) bei Function.DateFormatter.format ( http: // localhost: 3000/node_modules/@ angle/common/src/facade/intl.js: 100: 26 ) bei DatePipe.transform ( http: // localhost: 3000/node_modules/@angular/common/src/pipes/date_pipe.js : 25: 37 ) Bei eval ( http: // localhost: 3000/node_modules/@angular/core/src/linker/view_utils.js: 188: 22 ) bei DebugAppView._View_AppComponent1.detectChangesInternal (AppComponent.template.js: 377: 148) bei DebugAppView.AppView.detectChanges ( http: // localhost: 3000/node_modules/@ angle/core/src/linker /view.js:200:14 ) bei DebugAppView.detectChanges ( http: // localhost: 3000/node_modules/@ angle/c ore/src/linker/view.js: 289: 44 ) unter DebugAppView.AppView.detectContentChildrenChanges ( http: // localhost: 3000/node_modules/@ angle/core/src/linker/view .js: 215: 37 ) unter DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js: 198: 8) unter DebugAppView.AppView.detectChanges ( http: // localhost : 3000/node_modules/@angular/core/src/linker/view.js: 200: 14 ) FEHLERKONTEXT: [Objekt Objekt]

7
safari

Sie können stattdessen Folgendes versuchen:

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

Bearbeiten

Ich denke, dass Ihre Anfrage keinen JSONP-Inhalt zurückgibt, sondern einen klassischen (JSON). Wenn ja, könnten Sie folgendes versuchen:

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

Versuchen Sie es mit einer Klasse anstelle einer Schnittstelle. In diesem Fall wäre video.model.ts also:

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

Ich hielt eine Präsentation von TypeScript vor kurzem, dies erinnerte mich an die Titel der Folie "Es gibt keine Schnittstelle!" In TypeScript wenn Sie eine interface definieren, wird sie tatsächlich zu nichts kompiliert. Das kann etwas irreführend sein. Ich glaube, ich verstehe, was Sie versuchen zu tun:

Das Problem ist die Art und Weise, wie das ObjektJSONPzurückkommt, und es wird aufgefüllt. Es steht also im Index [1]. Versuchen Sie es stattdessen:

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