title: Angular2 nested http get request
body: <p>I have two APIs api/resource/Item which returns</p>
  
  <pre><code>{data: [
  {name: "BE106359"},
  {name: "NDBKR5050"}
  ]}
  </code></pre>
  
  <p>and for Item details api/resource/Item/{name} which returns</p>
  
  <pre><code>{
  data: {
  net_weight: 0,
  max_discount: 0,
  item_name: "NEC | BE106359 | CD-PRTA - ISDN PRI TRUNK BLADE, SV8xxx",
  website_warehouse: "Stores - CT",
  default_material_request_type: "Purchase",
  disabled: 0,
  name: "BE106359"
  ......
  }}
  </code></pre>
  
  <p>my angular2 code to iterate through details but print undefined value so couldn't get any value on my HTML template </p>
  
  <pre><code>@Injectable()
  export class ProductsService  {
    getProductDetails() {
      return this.http.get("https://domain/api/resource/Item")
        .map(
        p =&gt; {
          let products = p.json().data;
              products.forEach(m =&gt;
            this.http.get('https://domain/api/resource/Item/'+ m.name)
            .map(details=&gt; details.json())
            .subscribe(details =&gt; details.data) // &lt;-- get values when trying to console print out 
         );
        });
    }}
  
  //calling service from component
  export class ProductsComponent implements OnInit {
    products;
  
    constructor(private service: ProductsService) {
      this.service.getProductDetails().subscribe(products =&gt; this.products = products); // &lt;---- console.log(products) print undefined value
    }}
  </code></pre>