Typescript/Angular2:将JSON转换为与Observable& JSONP [英] Typescript / Angular2: Cast JSON to interface with Observable & JSONP

问题描述

我想将json-array转换为我创建的界面，并希望在浏览器中显示它.我认为我的界面可能有问题，但我无法弄清楚... 要使我的代码运行我需要更改什么?

I'd like to cast my json-array to my interface which I've created and like to display it in the browser. I think there is probably something wrong with my interface but I can't figure it out... What do I need to change to get my code running?

接口:

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

编辑

1. 我已经在chrome的网络标签中检查了请求是否正确，并且工作正常:200 OK->响应也不错
2. 我按照Thierry的说明编辑了代码，现在它终于在我的数组中显示了第一个对象:-)！但是我现在收到以下错误:

未捕获的异常:app/html/app.html:27:11中的错误 原始异常:RangeError:提供的日期不在有效范围内. 原始堆栈: RangeError:提供的日期不在有效范围内. 位于 boundformat (本机) 在Function.DateFormatter.format( http://本地主机: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 ) 评估时( http://localhost:3000/node_modules/@angular/core/src/linker/view_utils.js:188:22 ) 在DebugAppView._View_AppComponent1.detectChangesInternal(AppComponent.template.js:377:148) 在DebugAppView.AppView.detectChanges( http://本地主机:3000/node_modules/@angular/core/src/linker/view.js:200:14 ) 在DebugAppView.detectChanges( http://localhost: 3000/node_modules/@angular/core/src/linker/view.js:289:44 ) 在DebugAppView.AppView.detectContentChildrenChanges( http://本地主机:3000/node_modules/@angular/core/src/linker/view.js:215:37 ) 在DebugAppView._View_AppComponent0.detectChangesInternal(AppComponent.template.js:198:8) 在DebugAppView.AppView.detectChanges( http://本地主机:3000/node_modules/@angular/core/src/linker/view.js:200:14 ) 错误内容: [对象对象]

Uncaught EXCEPTION: Error in app/html/app.html:27:11 ORIGINAL EXCEPTION: RangeError: Provided date is not in valid range. ORIGINAL STACKTRACE: RangeError: Provided date is not in valid range. at boundformat (native) at Function.DateFormatter.format (http://localhost:3000/node_modules/@angular/common/src/facade/intl.js:100:26) at 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) at DebugAppView._View_AppComponent1.detectChangesInternal (AppComponent.template.js:377:148) at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14) at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44) at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:215:37) at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:198:8) at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14) ERROR CONTEXT: [object Object]

推荐答案

您可以尝试以下方法:

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

修改

我认为您的请求不会返回JSONP内容，而是经典的(JSON).如果是这样，您可以尝试以下操作:

I think that your request doesn't return JSONP content but classical one (JSON). If so, you could 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);

这篇关于Typescript/Angular2:将JSON转换为与Observable& JSONP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！