send same event to different functions in angular2

Question

I have a search form in my homepage that has input box and select dropdown. The user can search other users either by typing the location or by html5 geolocation. So when user visits the page for first time, it asks user if they let app know their location. If they agree, then latitude longitude and selected option from dropdown is taken and run database query. However I am not sure if my following attempt is the way it should be. Since I also want to bind the select when user searches with or without geolocation. My select input is

<div class="input-group-btn">
  <select class="btn btn-danger btn-lg" style="border-radius: 0px;" bindon-ngModel="btype" on-ngModelChange="search($event)" on-ngModelChange="successPosition($event)" name="btype" >
      <option *ngFor="let btype of bloodtypes" [value]="btype">{{btype}}</option>
  </select>
</div>

My geolocation function inside the angular2 component looks like this

geolocation: function(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(this.successPosition,
            this.failurePosition, { 
                                    enableHighAccuracy: true, 
                                    timeout:3000,
                                    maximumAge: 4000 });
    }
    else{
        return(false);
    }
},
successPosition: function(position){
    if(position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    }else{
        self.btype = position;
    }
    window.location.replace("/users?utf8=✓&longitude=" + 
         encodeURIComponent(self.longitude) + "&latitude=" + 
         encodeURIComponent(self.latitude) + "&btype=" + 
         encodeURIComponent(self.btype));
    },

but when successPosition() recieves the parameter I cannot assign latitude, longitude and btype at the same time. If I assign latitude and longitude, btype is undefined and vice versa. Please tell me is this how should I do or there is another method?

could you just send the event to a single function. Then have that function call other functions? — LLai, Aug 24 '17 at 02:21
if I send event to single function then I also need to send position object to get latitude and longitude. I need to form url from latitude longitude and btype — Rabin Poudyal, Aug 24 '17 at 02:32

Sonicd300 · Answer 1 · 2017-08-24T02:28:22.400

0

is this what you're looking for:

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

edited Aug 24 '17 at 02:28

answered Aug 24 '17 at 02:15

Sonicd300

1,950
1
16
22

kind of but the problem here is if, if condition fails then only self.btype gets assigned and self.latitude and self.longitude becomes undefined. :( – Rabin Poudyal Aug 24 '17 at 02:24
check the updated function, if position.coords on fail is set anyways but lat lng are undefined, then you have to do something like ```position.coords.hasOwnProperty('latitude')``` in the ternary operator's condition – Sonicd300 Aug 24 '17 at 02:29
in that 'something else' part I want to retrive the old value of self.latitude and self.longitude can you format the code please. – Rabin Poudyal Aug 24 '17 at 02:48
then just change 'something else' for self.latitude/longitude respectively, as im assuming you have self in a global scope, therefore old values are available in self. Please confirm to edit the answer :D – Sonicd300 Aug 24 '17 at 02:50
Wait, but first time self.latitude self.longitude would be undefined if it fails, you dont have previous value, grouping these in the if was the right answer no need for a ternary operator. – Sonicd300 Aug 24 '17 at 02:53
Yes I checked if the solution works but. I found position.coords is not returning true or false it is returing undefined so that operator does not work :( – Rabin Poudyal Aug 24 '17 at 03:05
if position.coords is undefined then "something else" will take place otherwise you will get an error like: "Cannot read latitude of undefined" the operator it is working, maybe you are trying to do something different. – Sonicd300 Aug 24 '17 at 03:07

score -1 · Answer 2 · answered Aug 24 '17 at 13:48

Adding to the answer by Sonicd300 above, the problem is actually with your if-else block in the successPosition function. In the answer above he's providing you with an option to rewrite the function by providing a tenary operator, read more about it here - Javascript one line If...else...else if statement

You can rewrite this -

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

By writing this and assigning a default longitude and latitude in case not provided by the user on page load.

successPosition: function(position) {
    self.btype = position;
    if (position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    } else {
    self.latitude = 'assign some default latitude'; // you should never assume that this will always be provided by the user on page load
    self.longitude = 'assign some default longitute'
}
window.location.replace("/users?utf8=✓&longitude=" + 
     encodeURIComponent(self.longitude) + "&latitude=" + 
     encodeURIComponent(self.latitude) + "&btype=" + 
     encodeURIComponent(self.btype));
}

send same event to different functions in angular2

2 Answers2