Typescript passing variables in functions

Question

new to Typescript and trying to get my head around it.

the following is the code that basically generates three random numbers and i use those to select random objects from json.

    @Injectable()
 export class TrackService {
     public drawn :number[]=[];

     constructor(private http: Http) {


     }
     public getRandomTrack(): Observable<Track[]> {
         this.generateRandomNumbers();
         console.log(this.drawn);  //this.drawn is available here 
         return this.http
         .get(API_ENDPOINT)
         .map(this.extractRandomData);
     }



     public extractRandomData(res: Response) {
         let body = res.json();        
         console.log(this.drawn); //undefined here

         var randomTrack = [];

         for(var i=0;i<this.drawn.length; i++){
             randomTrack.push(body.results[this.drawn[i]]);
         }

         return randomTrack;
     }


     private generateRandomNumbers(){
         var available = [];

         for (var i = 1; i<= 55; i++) {
             available.push(i);
         }

         for (var i = 0; i <3; i++) {
             var random = Math.floor((Math.random() * available.length));
             this.drawn.push(available[random]);
             available.splice(random, 1);
         }

         return this.drawn;
     }

as you see inside extractRandomData this.drawn is undefined, how do i pass the this.drawn into that function so i can access that array.

Please help.

Max Koretskyi · Accepted Answer · 2017-08-05 16:28:39Z

1

You have to bind the context:

 public getRandomTrack(): Observable<Track[]> {
     this.generateRandomNumbers();
     console.log(this.drawn);  //this.drawn is available here 
     return this.http
     .get(API_ENDPOINT)
     .map((v) => { this.extractRandomData(v) });
 }

See “this” cannot be used in typescript function (Angular) for more details.

answered Aug 5, 2017 at 16:28

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

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

2 Comments

Spdexter Over a year ago

Hi Maximus thanks! Excuse my ignorance, what is v here ?

Max Koretskyi Over a year ago

it's just a variable that will hold a value

Spdexter · Accepted Answer · 2017-08-05 16:33:22Z

1

I got it working by adding this at the end

https://www.tutorialspoint.com/typescript/typescript_array_map.htm

public getRandomTrack(): Observable<Track[]> {
         this.generateRandomNumbers();
         console.log(this.drawn);
         return this.http
         .get(API_ENDPOINT)
         .map(this.extractRandomData,this);
     }

thoughts on how good or bad is this?

answered Aug 5, 2017 at 16:33

Spdexter

9432 gold badges7 silver badges20 bronze badges

Comments

Nour · Accepted Answer · 2017-08-05 18:32:30Z

1

Drawn array is global in your service so you can access it whenever you want inside service, but your problem is in the map call, you should call like below:

return this.http.get(API_ENDPOINT)
            .map(responseData => this.extractRandomData(responseData));

answered Aug 5, 2017 at 18:32

Nour

5,9293 gold badges23 silver badges24 bronze badges

Comments

Rajarajan Rajasekaran · Accepted Answer · 2017-08-05 18:47:01Z

0

You can use any of the above answers. Both are right. Refer this link for more info this is undefined in map

Sample code

public getRandomTrack(){
  this.generateRandomNumbers();
  console.log(this.drawn);
  [1,2].map(this.extractData,this); //Pass this as argument
  [1,2].map(data => {               // Arrow function
  console.log(this.drawn);
}

 extractData(val : any){
  console.log(val);
  console.log(this.drawn);
 }

answered Aug 5, 2017 at 18:47

Rajarajan Rajasekaran

1853 silver badges14 bronze badges

Collectives™ on Stack Overflow

Typescript passing variables in functions

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related