代码之家 › 专栏 › 技术社区 › user1436795

Angular 2 Typescript将json解析为对象

typescript angular

user1436795 · 技术社区 · 7 年前

我是Angular2和打字的新手。我现在在学习。我试图从REST服务中获取数据,然后我想制作一个列表并插入来自该服务的数据。所以我的API链接是 http://jsonplaceholder.typicode.com/users/1

这是我的HttpTestService。ts代码;

import {Component} from '@angular/core';
import {Http} from '@angular/http';
import {Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';

import 'rxjs/add/operator/map';

@Injectable()
export class HTTPTestService{
  constructor(private _http:Http){}
    getUser(){
      return this._http.get("http://jsonplaceholder.typicode.com/users/1")
      .map(res=>res.json());
    };
}}

这是我的HttpTestComponent。ts;

import { Component } from '@angular/core';
import {HTTPTestService} from './http-test.service';
import { User } from './user';

@Component({
  selector:'http-test',
  template:`
    <button (click)="onGet()">Get Data</button><br/>
    <div>Output:{{getData}}</div><br/>
    <button (click) = "onPost()">Post Data</button><br/>
    <div>Output:{{postData}}</div><br/>
    <button (click) = "onPromiseGet()">Get Data(w Promise)</button><br/>
    <div>Output:{{getPromiseData}}</div><br/>
  `,
  providers:[HTTPTestService]
})

export class HTTPTestComponent{
  getData:string;
  getPromiseData:string;
  postData:string;


  constructor(private _httpService:HTTPTestService){}

  onGet(){
    console.log('Getting user now.');
    this._httpService.getUser().subscribe(        
      data =>this.getData = JSON.stringify(data),
      error=>alert(error),
      ()=>console.log('Finished Get')      
    );         
  }}

这是我的用户。输电系统

 export class User{
  constructor(public id: number,public name:string) { }
 }

如何填充 User 类,然后如何将通用列表添加到班

顺致敬意,

1 回复 | 直到 7 年前

Patryk Brejdak 7 年前

据我所知,你的问题只是创建一个新的 Object 属于 User 键入并传递所需的数据,在您的情况下是这样的 id and name .

private userList: Array<User> = new Array<User>();

onGet(){
    console.log('Getting user now.');
    this._httpService.getUser().subscribe(        
      data => this.parseUser(data),
      error=>alert(error),
      ()=>console.log('Finished Get')      
    );         
  }

parseUser(data) {
   let user = new User(data.id, data.name);
   this.userList.push(user);
}

要创建用户列表,只需创建一个 使用者 就像那样 private Users: Array<User> = new Array<User>(); 记住导入 使用者 .

编辑。出于测试目的,更改此

@Component({
  selector:'http-test',
  template:`
    <button (click)="onGet()">Get Data</button><br/>
    <div>Output:{{getData}}</div><br/>
    <button (click) = "onPost()">Post Data</button><br/>
    <div>Output:{{postData}}</div><br/>
    <button (click) = "onPromiseGet()">Get Data(w Promise)</button><br/>
    <div>Output:{{getPromiseData}}</div><br/>

    <div *ngFor="let user of userList">
       <p>Id: {{user.id}}</p>
       <p>Name: {{user.name}}>/p>
       <br />
    </div>
  `,
  providers:[HTTPTestService]
})

当响应到来时 angular 将打印数据:)