store array into global variable angular

Question

I am trying to save the value of parse array into global array. but global array showing me undefined

  dataUrl: string = "assets/data.csv";
  private data:[];
dataInit(){
    this.papa.parse(this.dataUrl, {
      download: true,
      complete: (result) => {
        // result.data.push(this.data);
        this.data = result.data
        // console.log(result.data, "inside parser");
        // console.log(this.data, "global array");
      }

    });
  }
  ngOnInit() {
    this.dataInit();
    console.log(this.data, "inside onInit");
}

Console

undefined "inside onInit"

I think console.log(this.data, "inside onInit"); prints before your this.dataInit(); method completes the execution. Try to un-comment // console.log(result.data, "inside parser"); and check. — hrdkisback
– hrdkisback, Commented Nov 1, 2019 at 5:53
@hrdisback, yes exactly this is the case. How can I access the array value out the side dataInit function? — Faisal Janjua
– Faisal Janjua, Commented Nov 1, 2019 at 5:54
You can use timeout block, you can use promise and observables check this for ref. medium.com/mr-frontend-community/… — hrdkisback
– hrdkisback, Commented Nov 1, 2019 at 5:57

Pardeep Jain · Accepted Answer · 2019-11-01 05:57:42Z

1

There are two reasons for that -

You need to initilize the variable like this private data: Array<any>= [];
You are binding the value into asyn method and consoling the value in synchronous way.

answered Nov 1, 2019 at 5:57

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

1 Comment

Faisal Janjua Over a year ago

you are right, but do we have any approach to get the value into global and reuse is when we need?

Surjeet Bhadauriya · Accepted Answer · 2019-11-01 06:04:23Z

1

The data will be available inside complete callback. So console.log(this.data) over there.

Reason: complete is a callback method which works asynchronously.

dataUrl: string = "assets/data.csv";
data = [];
dataInit(){
    this.papa.parse(this.dataUrl, {
      download: true,
      complete: (result) => {
        // result.data.push(this.data);
        this.data = result.data            
        console.log(this.data);
      }

    });
  }
  ngOnInit() {
    this.dataInit();
}

edited Nov 1, 2019 at 6:04

answered Nov 1, 2019 at 5:56

Surjeet Bhadauriya

7,2243 gold badges39 silver badges54 bronze badges

2 Comments

Faisal Janjua Over a year ago

Yes, console show the data inside the papa.parse() function.I need to push the parse array into global array to access data in other functions. Is there any other approach to push the csv data into global?

Surjeet Bhadauriya Over a year ago

@FaisalJanjua, you can access this.data in any functions as it is already in your this variable.

Thabo · Accepted Answer · 2019-11-01 05:53:43Z

0

Change the initialization of the data property to something like

private data = [];

Or

private data: Array<T> = []

Instead of T type your array accordingly

edited Nov 1, 2019 at 5:53

answered Nov 1, 2019 at 5:50

Thabo

1,3972 gold badges22 silver badges49 bronze badges

2 Comments

Faisal Janjua Over a year ago

I tried both private data:[] = []; and private data = [] both show Array(0).

Thabo Over a year ago

Are you pushing in the results contents in the array?

Thabo · Accepted Answer · 2019-11-01 05:57:30Z

0

Put the console log inside the complete function of the async code.

Because the papa.parse download code is asynchronous, the console log will show the initial value of data because the results are not ready yet.

answered Nov 1, 2019 at 5:57

Thabo

1,3972 gold badges22 silver badges49 bronze badges

Comments

DHARMRAJ THAKUR · Accepted Answer · 2019-11-01 06:05:36Z

0

Because this.papa.parse function is asynchronous, you can't get value of data variable right after calling dataInit... better to do inside complete callback

dataUrl: string = "assets/data.csv";
private data:[];
dataInit() {
  this.papa.parse(this.dataUrl, {
    download: true,
    complete: (result) => {
      this.data = result.data
      this.toDo();
    }
  });
}

ngOnInit() {
  this.dataInit();
}

toDo(){
  console.log(this.data, "global array");
}

answered Nov 1, 2019 at 6:05

DHARMRAJ THAKUR

8210 bronze badges

Collectives™ on Stack Overflow

store array into global variable angular

5 Answers 5

1 Comment

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related