typescript array is empty after using .push method

Question

I am trying to populate an array zvols which contains name of the path of a list of zvols. The problem is I am getting an empty array after successful get call,

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable, Subject, Subscription } from 'rxjs/Rx';
import { EntityUtils } from '../pages/common/entity/utils'
import { RestService, WebSocketService } from '../services/';


@Injectable()
export class VmService {
    protected volume_resource_name: string = 'storage/volume'

    constructor(protected rest: RestService){
    };

getStorageVolumes() {
    let zvols: Array<any> = [];
    this.rest.get(this.volume_resource_name , {}).subscribe((res) => {
        let data = new EntityUtils().flattenData(res.data);
        for (let zvol_obj of data){
            if (zvol_obj.type === 'zvol') {
                zvols.push(zvol_obj.path);
            }
        }
        console.log("BEFORE:" + zvols);
    });
     console.log("AFTER:" + zvols);
    return zvols;
}
}

I can see that console prints

AFTER:
main.bundle.js:744 Unknown message:  Object {msg: "ready", subs: Array(1)}
vm.service.ts:26 BEFORE:tank-a/ds-a/zvol-a,tank-b/ds-b/zvol-b

I am confused about this behavior. :(

What you see in the console is that AFTER is printer before BEFORE. It means that your 'BEFORE' console.log() is actually called after return zvols, in the callback function. You can't return the result of async operation like that. — artem
– artem, Commented May 16, 2017 at 0:11
ok, please tell me how can I return the result of asnyc call ? — vector8188
– vector8188, Commented May 16, 2017 at 0:13
You can't. You have to use it in the callback. How - it depends on what exactly you want to do with it. You can return the result of get() from getStorageVolumes(), then the code that calls it should do a subscribe() and use the result in the callback it provides to subscribe(). — artem
– artem, Commented May 16, 2017 at 0:22

basarat · Accepted Answer · 2017-05-16 00:26:21Z

1

In your code:

this.rest.get(this.volume_resource_name , {}).subscribe((res) => {
    let data = new EntityUtils().flattenData(res.data);
    for (let zvol_obj of data){
        if (zvol_obj.type === 'zvol') {
            zvols.push(zvol_obj.path);
        }
    }
    console.log("BEFORE:" + zvols);
});
 console.log("AFTER:" + zvols);

AFTER executes before the BEFORE line. This is the nature of async programming.

Learning Async programming

Use a debugger and step through the code to see how it works.

answered May 16, 2017 at 0:26

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vector8188 Over a year ago

So I put in debugger right before this.rest.get(this.volume_resource_name , {}).subscribe((res) => { and I saw that it directly went to return zvols; what am I missing here ?

Collectives™ on Stack Overflow

typescript array is empty after using .push method

1 Answer 1

Learning Async programming

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Learning Async programming

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related