如何在 Angular 2 中处理 JSON 数据？

Question

您好，我是 Angular 的新手，我一直在努力学习 Angular 2，所以要温柔:)。 我一直在尝试使用 WP API 插件将 WordPress 用作我的数据 API。并且到目前为止能够从 WordPress 获取帖子。下面是我的数据服务代码。

import {Injectable} from "angular2/core";
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import {PostInterface} from './data.interface';
import {Headers} from "angular2/http";
import {RequestOptions} from "angular2/http";



@Injectable()
export class DataService{
    private _dataURL : string = 'http://localhost/wordpress/?rest_route=/wp/v2/posts';
    posts : PostInterface [];
    post : PostInterface;
    errorMessage : string;

    constructor(private http:Http){}

    getPosts():Observable<any[]>{
        //return this.http.get(this._dataURL).map((res:Response) => res.json());
        return this.http.get(this._dataURL)
            .map(res=>res.json())
            //.do(data => console.log(data)) // eyeball results in the console
            .catch(this.handleError);
    }

    //todo fix search

    getPost(filterid:number):Observable<any[]>{
         //filterid is the id of a specific post
        this._dataURL = this._dataURL + '/' + filterid;
        return this.http.get(this._dataURL)
            .map(res => res.json())
            .catch(this.handleError);
    }




    private handleError (error: Response) {

        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

}

在代码中，我使用getPosts() 方法获取所有帖子数据，但我也有一个getPost() 方法来获取特定帖子。 我想知道是否可以使用getPosts() 获取的JSON 数据并在getPost() 方法中再次使用它。目前getPost() 所做的是再次调用http.get 我不想一次又一次地发出http.get 请求。

我希望getPosts() 发出一个请求，获取数据并存储在某处，以便其他方法可以使用数据并进行特定操作。

谢谢

Answer 1

是的，您可以首先获取所有数据并保存到一个变量中，或者您订阅数据的另一种方法是执行for loop 并与您的filterId 匹配，其中过程匹配将数据存储到数组中并根据您的操作实现需要。这是假设您的数据是数组形式的示例..

import {Injectable} from "angular2/core";
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import {PostInterface} from './data.interface';
import {Headers} from "angular2/http";
import {RequestOptions} from "angular2/http";

@Injectable()
export class DataService{
    private _dataURL : string = 'http://localhost/wordpress/?rest_route=/wp/v2/posts';
    posts : PostInterface [];
    post : PostInterface;
    errorMessage : string;

    constructor(private http:Http){}

    getPosts():Observable<any[]>{
        //return this.http.get(this._dataURL).map((res:Response) => res.json());
        return this.http.get(this._dataURL)
            .map(res=>{
              if(res.json()){
                return res.json()
              }
            });
            //.do(data => console.log(data)) // eyeball results in the console
            .catch(this.handleError);
    }


    // Method in any file where you want to subscribe your data and wanna fetch specific post //

    singlePost: Array<any>= [];

    methodName(filterid:number){

        service.getPosts()
         .subscribe(res=>{
            console.log(res)   // Here you data whihc is coming from .map i.e getPosts methods using Http

            for(let i=0; i< res.length ; i++){       // I am asuming your data is in array from so performing length functionality
                if(filterid == res[i].filterid){
                    this.singlePost = res[i];
                    break;
                }
            }

            console.log(this.singlePost)        // This will return your single Specific POst without using `Http` again and again
         })
    }

Answer 2

当收到getPosts 结果时，您可以尝试使用do 运算符将数据保存到您的服务中：

@Injectable()
export class DataService{
  private _dataURL : string = 'http://localhost/wordpress/?rest_route=/wp/v2/posts';
  posts : PostInterface [];
  post : PostInterface;
  errorMessage : string;

  constructor(private http:Http){}

  getPosts():Observable<any[]>{
    //return this.http.get(this._dataURL).map((res:Response) => res.json());
    return this.http.get(this._dataURL)
        .map(res=>res.json())
        .do(data => this.posts = data) // <--------
        .catch(this.handleError);
  }

  findPostById(id) {
    if (this.posts != null) {
      return this.posts.find(((element, index, array) {
        return (element.id = id);
      });
    } else {
      return null;
    }
  }

  getPost(filterid:number):Observable<any[]>{
    var post = findPostById(filterid);
    if (post != null) { // <--------
      return post;
    } else {
      this._dataURL = this._dataURL + '/' + filterid;
      return this.http.get(this._dataURL)
          .map(res => res.json())
          .catch(this.handleError);
    }
  }

请根据您的需要随意调整此代码。