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

Angular 2 Typescript将json解析为对象

  •  2
  • 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 年前
        1
  •  3
  •   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 将打印数据:)