title: get the specific data from JSON API
body: <p>I am trying to get a specific data from my JSON API but I always get <code>undefine</code> in my console.   </p>
  
  <p>Here is my TS file where I use <code>http get</code> to get my JSON API:</p>
  
  <p>My TS code:</p>
  
  <pre><code>this.http.get('http://xxxxx.com/xxx/api.php/customer?filter=customer.customer_id,eq,21&amp;transform=1')
          .map(res =&gt; res.json())
          .subscribe(data =&gt; {
              this.customer = data.customer;
              console.log(this.customer);
              this.cus_city = this.customer.customer_delivery_city_address;
              console.log("City Address: " +this.cus_city)
          }, (err) =&gt; {
              console.log("Something went wrong.");
          });
  </code></pre>
  
  <p>Here is the API result in my console:</p>
  
  <p><a href="https://i.stack.imgur.com/CoL9S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CoL9S.png" alt="enter image description here"></a></p>
  
  <p>What I wanted to get is the <code>customer_delivery_city_address</code><a href="https://i.stack.imgur.com/CoL9S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CoL9S.png" alt="enter image description here"></a>. I tried to pass the <code>this.customer.customer_delivery_city_address</code> to <code>this.cus_city</code> variable and show it to my console <code>console.log("City Address: " +this.cus_city)</code> but I am getting <code>undefined</code> result. All is well when I call it to my HTML <code>{{customer.customer_delivery_city_address}}</code>. I still have no idea how can I get the specific data to my TS file. Hope anyone can help me with this. Thank you in advance.</p>