Submitting paramaters to services? (I'm trying to manipulate an http.get query)

ionic-v1
1

It should be pretty straight forward from my code, but what I’m trying to do is take some form values and modify my api query within my service to reflect that.

I have a view that works great, it pulls in a list from my api and populates:

<ion-view>
  <ion-content>
    <select>
      <option value="myvalue1" name="PARAM1" id="PARAM1">value1</option>
      <option value="myvalue2" name="PARAM2" id="PARAM2">value2</option>
    </select>
    <button data-ng-click="filterResults()">submit</button>

  <ion-list>
    <ion-item data-ng-repeat="thing in things" href="#/thing/{{thing.ID}}">
      <h2>{{thing.title}}</h2>
    </ion-item>
  </ion-list>

  </ion-content>
</ion-view>

Which as a controller:

.controller('ThingIndexCtrl', function($scope, $ionicLoading, ThingService) {
  $scope.things = ThingService.all();
  
  $scope.filterResults = function() {
    $scope.things = ThingService.all(PARAM1, PARAM2); //need to send param1 and param2
  };
})

That has a service:

.factory('ThingService', function($http) {
  var things = [];

  $http.get('http://mylocalapi.tld/things/directory/?param1=PARAM1&param2=PARAM2') //only use param1, param2 if exist (if they're empty it should be ok)
    .then(function(response){          
      var jsonData = response.data.thingsfromapi;
      var jsonKeys = Object.keys(jsonData);

      for (var i = 0; i < jsonKeys.length; i++) {
        var jsonSingle = jsonData[jsonKeys[i]];
        things.push(jsonSingle);
      }
    })

  return {
    all: function() {
      return things;
    },
    get: function(thingId) {
      var myItem = _.find(things, { 'ID' : parseInt(thingId)});
      return myItem;
    }
  }
})

So I just need to pass the PARAM values when clicking a link/button back into my $http.get for a new result.

2

Something like this :

.factory(‘ThingService’, function($http) {
var things = [];

var loadThings = function(param1, param2) {

	var url = 'http://mylocalapi.tld/things/directory/';

	if(param1 && param2) {
		url = http://mylocalapi.tld/things/directory/?param1=PARAM1&param2=PARAM2'
	}

  $http.get(url) 
    .then(function(response){          
      var jsonData = response.data.thingsfromapi;
      var jsonKeys = Object.keys(jsonData);

      for (var i = 0; i < jsonKeys.length; i++) {
        var jsonSingle = jsonData[jsonKeys[i]];
        things.push(jsonSingle);
      }
    })

}

return {
all: return loadThings
},
get: function(thingId) {
var myItem = _.find(things, { ‘ID’ : parseInt(thingId)});
return myItem;
}

3

Thanks, I was able to implement a pretty much working solution going from that.

Now I need to pass the values from my inputs to my initial click function (currently I’m just declaring manually via data-ng-click="filterResults('myvalue1', 'myvalue2')") – I’m assuming something like ng-switch will help me here?

Secondly, which may be solved when i pass the parameters above; but when the list populates with filtered results after clicking the button, and I click that result for a detail page - clicking the back button will reload the “all” list due to, well, requesting all by default in the controller.

So I guess i need to figure out the best way to keep the filtered list/position in scroll when going back from a filtered selection. (If my input selects don’t change back to default when I go back to that page, it should be able to re-fetch the filtered albeit without the scroll position where you last left off)

4

Use ng-model on the inputs. Then when you submit, just pass those model values from the controller:

<input type="text" ng-model="param1"/>
<input type="text" ng-model="param2"/>

$scope.filter = function() {
  $scope.things = ThingService.all($scope.param1, $scope.param2)
};
5

When using ng-model on a select it’s injecting <option value="? undefined:undefined ?"></option> as my first option. How would I set a default in it’s place (like <option value="">All</option>)

I’m assuming because on the select it’s looking to bind some data from the controller by default?

Either way my select box currently in code:

<select name="things" data-ng-model="param1">
        <option value="">All</option>
        <option data-ng-repeat="thingtype in thingtypes" value="{{thingtype.value}}">{{thingtype.name}}</option>
</select>

Which does work, except that it ends up injecting that undefined option as the first element when adding the model.

HTML Output:

<select name="things" data-ng-model="param1">
        <option value="? undefined:undefined ?"></option>
        <option value="">All</option>
        <!--//... list of ng-repeat elements...//-->
</select>

Is there a way to tell it not to inject an option? Or if not, how can i pull the <option value="">All</option> to be the injected value.

6

The problem is now gone; however how it fixed itself I dunno. Maybe when i closed/reopened my browser.