Copy some specific data from API array to local array

I want to loop based on API array length and add or (PUSH) only {{id}}, {{qty}} from it to the local array.

API array from server

m_id: "9a915"
m_name: "test"
material: Array(2)
2:[
    {
        "id": "9528278c-4105-4c00-aff3-2d04fc57b797",
        "material_id": "92e0befb-8f75-4499-93ca-f86fa3c11df8",
        "name": "Молоток",
        "qty": "шт",
        "requested": 13,
    },
   {
        "id": "9528278c-4105-4c00-aff3-2d04fc57b797",
        "material_id": "92e0befb-8f75-4499-93ca-f86fa3c11df8",
        "name": "Молоток",
        "qty": "шт",
        "requested": 13,
    }
]

My .ts code

this.http.get( 'https://xxx.yyy.zzz/api/, options )
      .subscribe((res: any) => {
        console.log('Succeess!', res);
        this.data = res;
        loading.dismiss();
        for(var i = 0; i < res.material.lenght; i++){
          this.list.push({ id: res.material.item[i].id, qty: res.material.item[i].qty});
        }
        console.log("ITEM",this.list);
      });

But my local array(this.list) show empty in the log.

First off, I hope lenght is really length in the original code.

I am generally highly suspicious when I see asynchronous code that modifies external state. It’s a really dangerous thing to do, because you have absolutely no way from outside the asynchronous handler to know whether data represents the old or new state of things. No static code analysis that I know of can help you see these bugs, either.

So I try as best I can to never write to anything outside from within a subscription:

this.data = res; → BAD
this.list.push → BAD

“But how do I update the backing properties in my page?”, you may ask. If this code is in a component or page, get it out of there. Components should not be interacting directly with HTTP. Move this into a service, where the method it’s in returns an Observable<Something[]>, where Something is the business interface representing an entry in your list, or modifies a Subject in the service that could already have been gotten by consumers.

At that point, your consumer is isolated and protected from the implementation details, including timing race issues, in your service. It is either receiving an Observable of the exact data it wants, or it already has one that will be updated with the results of the API call.