title: angular 2 - http get returns empty array
body: <p>My Component code:</p>
  
  <pre><code>products: Product[];
  constructor(private productService: ProductService) { }
  
  ngOnInit() {
      this.productService.getProducts()
          .subscribe(
          (products: Product[]) =&gt; {
              this.products = products;
          }
          );
  }
  </code></pre>
  
  <p>My HTML Code:</p>
  
  <pre><code>                &lt;tr *ngFor="let product of products"&gt;
                      &lt;td&gt;
                          &lt;a [routerLink]="['/product-details', product.SKU]"&gt;{{ product.SKU }} &lt;/a&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;a [routerLink]="['/product-details', product.SKU]"&gt;{{ product.mrp }} &lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>
  
  <p>My Service Code:</p>
  
  <pre><code>getProducts() {
      return this.http.get('http://localhost:3000/product')
          .map((response: Response) =&gt; {
              const products = response.json().obj;
  
              let transformedMessages: Product[] = [];
              for (let product of products) {
                transformedMessages.push(new Product(product.SKU, product.mrp, 111, 111));
              }
              this.products = transformedMessages;
              return transformedMessages;
  
              return products;
  
          })
          .catch((error: Response) =&gt; Observable.throw(error.json()));
  </code></pre>
  
  <p>My Backend route:</p>
  
  <pre><code>router.get('/', function (req, res, next) {
      Product.find().exec(function (err, products) {
          if (err) {
              return res.status(500).json({
                  title: 'An error occurred',
                  error: err
              });
          }
          res.status(200).json({
              message: 'Success',
              obj: products        //obj comes from here
          });
      });
  });
  
  Response:
  {
  "message": "Success",
  "obj": [
  {
  "0": {
  "SKU": "V2620151BR",
  "Batch": "1",
  "Folder Number": "85",
  "MRP": "799",
  "Size": "Free",
  "Color": "Yellow",
  },
  </code></pre>
  
  <p>My Backend Model Class:       </p>
  
  <pre><code>var schema = new Schema({
      sku: { type: String, required: true, unique: true },
      mrp: { type: Number }
  });
  </code></pre>
  
  <p>My Frontend Model:</p>
  
  <pre><code>export class Product {
      constructor(
          public SKU: string,
          public mrp: number,
          public selling_price: number,
          public current_inventory: number
      ) { }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/F4WVp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F4WVp.jpg" alt="enter image description here"></a></p>
  
  <p>My <code>http://localhost:3000/product</code> reutrns the json response correctly. But somehow in the HTML, when the page loads everything is empty.<br>
  I am only getting one value - <code>empty empty 111 111</code>    </p>
  
  <p>Most of the things are setup fine, I am not sure why the empty HTML when I get the response back from <code>http://localhost:3000/product</code></p>