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

Question

I am working on angular app where I want to display my post which are coming from two different collection i.e is Public and private. Now I am making two http request and I am getting data but I am not able to merge it in one array.Also I want to display it in component on every update. I am not able to parse the multiple keys I am getting from firebase in output. Though I am able to parse single object.

Here is my code

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()
}

Output

[
  {
    "-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"
    }
  }
]

Output Image

For Single key I am able to parse data like this

 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

You have asked question about merge but the answer itself is hidden in your question. So first of all you are making two http call so you will be getting two output from individual request. Now in subscribe method you can initialize your result in separate array and lastly merge them in single array

Here is the updated code

 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

  }

I hope it will be helpful and this approach is very simple for beginner. Also you can try merge map or other variant but this is the simplest approach I can provide which is easy to understand.