Displaying an API results in angular with array and multidimensional object

Question

In angular I am currently connecting to an API getting the data back in Json Format, then iterating through that data and displaying each element of the array.

There are 6 values in the array, of which there is a multidimensional object. This object (sizes) gives the size of the clothes and the stock count.

What I would like to do is display an individual item for each size in the front end. So 18 items, 6 unique clothes and 3 sizes per clothes.

To add, I've taken off the api link for this question.

Response Example

Current Code

server.service.ts

import {Injectable} from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import 'rxjs/Rx';

@Injectable()

export class ServerService{
constructor(private http: Http) {}
getServers() {
    const headers = new Headers({'x-api-key':'apiKey'});
    return this.http.get('APIURL', {headers: headers})
    .map(
        (response: Response) => {
            const data = response.json();
            //look at the amount of clohtes types then for each of them create a new data item
            console.log(data.Items);
            outerloop: 
            for (const item of data.Items){
                console.log("before");


                // console.log(item.size.medium);
                const forLoop = item.size;

                let itemsChecked = 0;
                console.log("reset" + itemsChecked);
                innerloop:
                for (let prop in forLoop){

                    item.size = prop;
                    console.log(prop);
                    item.stock = forLoop[prop];
                    console.log(forLoop[prop]);
                    //break innerloop;
                    //return data.items;

                    if (item.stock == 0){
                        console.log ("break");
                        itemsChecked++;
                        console.log("itemsChecked " + itemsChecked);
                        continue innerloop;
                    }if (itemsChecked ==3){
                        continue outerloop;
                    }
                    else{
                        break innerloop;
                    }
                }
                //return data.Items;             
            }

            return data.Items;
        }
    );
}
}

app.components.ts

import { Component } from '@angular/core';
import { Response } from '@angular/http'
import { ServerService } from './server.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
clothing = [
{
  brand: 'Next',
  colour: 'Red',
  description: 'Next Cool T-shirt best for you',
  name: 'Next Cool T-shirt',
  productId: '3giw3l',
  size: 'large',
  stock: '1',
  type: 'T-Shirt'
},
{
  brand: 'Next',
  colour: 'Blue',
  description: 'Next Cool Blue Hoodie perfect for work',
  name: 'Next Cool Hoodie',
  productid: '1cab3ef',
  size: 'large',
  type: 'Hoodie'
}
];

constructor(private serverService: ServerService){}
onGet(){
this.serverService.getServers()
.subscribe(
  (data: any []) => 
  {
    this.clothing = data;
    console.log(data);
  },
  (error) => console.log(error)
);
}
}

app.component.html

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
  <button class="btn btn-primary" (click)="onGet()">Get Data</button>
  <hr>
  <ul class="list-group" *ngFor="let clothes of clothing">
      <li class="list-group-item">
        Brand: {{ clothes.brand }}
      </li>
      <li class="list-group-item">
        Colour: {{ clothes.colour }}
      </li>
      <li class="list-group-item">
        Description: {{clothes.description}}
      </li>
      <li class="list-group-item">
        Name: {{clothes.name}}
      </li>
      <li class="list-group-item">
        Product ID: {{clothes.productid}}
      </li>
      <li class="list-group-item">
        Size: {{clothes.size}}
      </li>
      <li class="list-group-item">
        Stock: {{clothes.stock}}
      </li>
      <li class="list-group-item">
        Type: {{clothes.type}}
      </li>
  </ul>
</div>
</div>
</div>

Answer 1

I supouse you want to do some like code at bottom, but Is there a reason to use the old and deprecated htpp? and the old Rxjs 5?

let items:any[]=[];
data.Items.forEach(item=>{
   for (size in item.size)
       items.push({
         ...item, //all properties of item
         size:size,
         stock:item.size[size]
       })
})
return items