从 firebase 的两个 http get 请求中获取数据并将它们组合在 angular 中的单个数组中并显示在页面上

Question

我正在开发 angular 应用程序，我想在其中显示来自两个不同集合的 post 即 Public 并且是私有的。现在我正在发出两个 http 请求并正在获取数据，但我无法将其合并为一个 array.Also 我想在每次更新时在组件中显示它。我无法在输出中解析从 firebase 获得的多个键。虽然我能够解析单个 object.

这是我的代码

service.ts

  getAllData(){
    let x=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/public.json`)
    let y=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/private.json`)
    forkJoin(x,y)
    .subscribe(data=>{


      console.log(data)

    })

component.ts

 ngOnInit(): void {
    this.acrud.getAllData()
}

输出

[
  {
    "-M7Szjv7F8hgjx4bL1Nj": {
      "category": "Happy",
      "date": "2020-05-16T14:57:15.743Z",
      "desc": "11111",
      "imgurl": "https://firebasestorage.googleapis.com/v0/b/write-your-heart-out-b338b.appspot.com/o/UauthUsers%2FScreenshot%20(8).png?alt=media&token=784d3163-6fe5-4f00-94ba-8b38a08d7a5e",
      "name": "111",
      "nameToSearch": "1111",
      "privacy": "true",
      "subcategory": "  ",
      "title": "1111"
    },
    "-M7TOCjqFUcr78TsdH6I": {
      "category": "Happy",
      "date": "2020-05-16T16:49:45.728Z",
      "desc": "This is public postThis is public postThis is public postThis is public postThis is public post",
      "imgurl": "https://firebasestorage.googleapis.com/v0/b/write-your-heart-out-b338b.appspot.com/o/UauthUsers%2FScreenshot%20(8).png?alt=media&token=ee6cd4c2-cdb3-43a8-86e2-4f65e2fb8c20",
      "name": "Mehul ",
      "nameToSearch": "this is public post",
      "privacy": "true",
      "subcategory": "  ",
      "title": "This is public post"
    }
  },
  {
    "-M7T5XTN6td6HlQKeHas": {
      "category": "Happy",
      "created_date": "2020-05-16T15:09:54.527Z",
      "date": "2020-05-16T15:09:54.527Z",
      "desc": "2222222222222",
      "name": "22222222222",
      "nameToSearch": "22222",
      "privacy": "false",
      "subcategory": "  ",
      "title": "22222"
    }
  }
]

输出图像

对于单键，我可以像这样解析数据

 this.acrud.getPublicPost()
      .pipe(
        map(responseData => {
          const postsArray: UPost[] = [];
          for (const key in responseData) {
            if (responseData.hasOwnProperty(key)) {
              postsArray.push({ ...responseData[key] });
            }
          }
          return postsArray;
        })
      )
      .subscribe(posts => {
        this.isFetching = false;
        this.public_post = posts;
        this.allpost = this.allpost.concat(this.public_post)
        console.log(this.public_post)
        console.log(this.isAll,this.isPrivate,this.isPublic)
      });

Answer 1

我认为你的问题可以解决，如果你像这样编辑你的合并对象

getAllData(){
    let x=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/public.json`)
    let y=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/private.json`)
    forkJoin(x,y)
    .subscribe(data => {
         console.log(data.flatMap(a=>Object.values(a)).reduce((acc,item)=>{
                       return {
                                ...acc,
                                ...item
                              };
          });
    });
 }

你会得到这个结果；

{
     category: "Happy",
     created_date: "2020-05-16T15:09:54.527Z",
     date: "2020-05-16T15:09:54.527Z",
     desc: "2222222222222",
     imgurl: "https://firebasestorage.googleapis.com/v0/b/write-your-heart-out-b338b.appspot.com/o/UauthUsers%2FScreenshot%20(8).png?alt=media&token=ee6cd4c2-cdb3-43a8-86e2-4f65e2fb8c20",
     name: "22222222222",
     nameToSearch: "22222",
     privacy: "false",
     subcategory: "  ",
     title: "22222"
}

Answer 2

您提出了有关合并的问题，但答案本身隐藏在您的问题中。所以首先你要进行两次 http 调用，所以你将从单个请求中获得两个输出。现在在订阅方法中，您可以在单独的数组中初始化结果，最后将它们合并到单个数组中

这是更新后的代码

 getAllData(){
    let x=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/public.json`)
    let y=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/private.json`)
    forkJoin(x,y)
    .subscribe(data=>{
       let x1 = data[0]
        let x2 = data[1]
        let x3 = []
        x3 = this.seprate(x1)
        let x4 = this.seprate(x2)
        x3= x3.concat(x4)
        console.log(x3);
    })

seprate(x) {
    let y = []
    for (const key in x) {

      if (x.hasOwnProperty(key)) {
        y.push({ ...x[key] });
      }
    }
    return y

  }

希望对您有所帮助，这种方法对于初学者来说非常简单。您也可以尝试合并映射或其他变体，但这是我可以提供的最简单的方法，易于理解。

从 firebase 的两个 http get 请求中获取数据并将它们组合在 angular 中的单个数组中并显示在页面上

Fetch Data from two http get request from firebase and combine them in single array in angular and display it on page

angular

typescript

observable

angular2-services

angular-http