title: Joining two observables based on id
body: <p>I have two api calls, one for getting all categories and another to get the posts. In posts api, I'm getting the categories ids, I just need to call the categories and get the categories name and add the name instead of ids in the post calls. I know it's not recommended to use nested api calls, so I used <code>flatMap</code> but have no idea how to implement it.</p>
  
  <p><strong>categories</strong></p>
  
  <pre><code>[
    {
      "id": 5,
      "name": "Angular",
      "slug": "angular",
      "parent": 4
    },
    {
      "id": 4,
      "name": "Tutorial",
      "slug": "tutorial",
      "parent": 0
    }
  ]
  </code></pre>
  
  <p><strong>posts</strong></p>
  
  <pre><code>[
    {
      "id": 1,
      "categories": [
        5,
        4
      ]
    },
    {
      "id": 2,
      "categories": [
        5
      ]
    }
  ]
  </code></pre>
  
  <p><strong>code</strong></p>
  
  <pre><code>this.blogService.getCategories()
    .pipe(
    flatMap((categories: BlogCategoryModel[]) =&gt; {
      console.log(JSON.stringify(categories)); // I think I have to do logic here
      return this.blogService.getPosts();
    })
  ).subscribe(posts =&gt; console.log(JSON.stringify(posts)));
  </code></pre>
  
  <p><strong>expected result</strong></p>
  
  <pre><code>[
    {
      "id": 1,
      "categories": [
        "Angular",
        "Tutorial"
      ]
    },
    {
      "id": 2,
      "categories": [
        "Angular"
      ]
    }
  ]
  </code></pre>