Question

嗨，我是Angular的新手，我一直在努力学习Angular 2，所以要温柔:)。我一直在尝试使用Word API作为我的数据API使用WP 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

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

@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);
    }
  }

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

我如何处理Angular 2中的JSON数据？

2 个答案: