title: How to get single record data from another JSON by Id in Angular 6?
body: <p>I am learning to build an angular 6 client to display data from JSON data. I can able to get data from the direct JSON values but don't know how to retrieve the data from a JSON based on an <strong>id</strong> <strong>that references another JSON object</strong>. I have tried various ways to achieve this but only results in <code> https://../users/undefined</code>. Here <code>undefined</code> is the <strong>Id</strong> I am passing from one JSON to another JSON.</p>
  <p>This is how the <strong>posts</strong> JSON looks like,</p>
  <pre><code>   [
         {
             &quot;userId&quot;: 1,
             &quot;id&quot;: 1,
             &quot;title&quot;: &quot;sunt aut facere repellat provident occaecati excepturi optio reprehenderit&quot;,
             &quot;body&quot;: &quot;quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto&quot;
         }, ...
     ]
  </code></pre>
  <p>This is the <strong>user by id</strong> JSON data,</p>
  <pre><code>    [
          {
          &quot;id&quot;: 1,
          &quot;name&quot;: &quot;Leanne Graham&quot;,
          &quot;username&quot;: &quot;Bret&quot;,
          &quot;email&quot;: &quot;Sincere@april.biz&quot;,
          &quot;phone&quot;: &quot;1-770-736-8031 x56442&quot;,
          &quot;website&quot;: &quot;hildegard.org&quot;,
      ]
  </code></pre>
  <p>I want to get the <code>&quot;name&quot;: &quot;Leanne Graham&quot;</code> from the <strong>user</strong> JSON using the <code>&quot;userId&quot;: 1</code> of the <strong>posts</strong> JSON.</p>
  <p>This is what I have in my <strong>PostsComponent</strong></p>
  <pre><code>    export class PostsComponent implements OnInit {
          posts$: Object;
          user$: Object;
          userId: Number
  
          constructor(private data: DataService, private route: ActivatedRoute) {
              this.route.params.subscribe(
                  params =&gt; this.user$ = params.id
              )
          }
  
          ngOnInit() {
              this.data.getPosts().subscribe(
                  data =&gt; this.posts$ = data
              );
  
              this.data.getUser(this.userId).subscribe(
                  data =&gt; this.user$ = data
              );
          }
  </code></pre>
  <p>User <strong>DetailsComponent</strong>,</p>
  <pre><code>    export class DetailsComponent implements OnInit {
          user$: Object;
  
          constructor(private data: DataService, private route: ActivatedRoute) {
              this.route.params.subscribe(
                  params =&gt; this.user$ = params.id
              )
          }
  
          ngOnInit() {
              this.data.getUser(this.user$).subscribe(
                  data=&gt;this.user$ = data
              )
          }
  
      }
  </code></pre>
  <p>Service,</p>
  <pre><code>    getUser(userId){
          return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId);
      }
  
      getPosts(){
          return this.http.get('https://jsonplaceholder.typicode.com/posts');
      }
  </code></pre>
  <p>What I have,</p>
  <p><a href="https://i.stack.imgur.com/9Zkut.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Zkut.jpg" alt="enter image description here" /></a></p>
  <p>What I want to achieve,</p>
  <p><a href="https://i.stack.imgur.com/qzAOT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qzAOT.jpg" alt="enter image description here" /></a></p>
  <p>Thank you.</p>