Angular - combine multiple text inputs after a get http url

Question

Asked variations on this question in a few places and read EVERYTHING on Google so I'm fairly certain this can't be done. But thought I would ask here one last time.

I want to append a GET $HTTP URL with a number of text input params.

For example

Date 1 textinput, day, month, year, +00 +'-' Date 2 textinput, day, month, year, +00 +'-'

= 1101201700-2101201700

This is the code I have so far and it works up to the point of adding whatever I type to the url, but as soon as I add another input field it fails saying the second input is undefined.

Any ideas? Want to keep it simple too ideally...

   .controller("DateCtrl", function ($scope, $stateParams, dateService) {
$scope.events = dateService.getEvents($stateParams.date).then(function (events) {
    $scope.events = events;
    console.log("Date Controller1 says: Hello World - I also work");

});

factory....

     .factory('dateService', function ($http) {
    var events = [];

    return {
        getEvents: function (date, date2) {
            var params = {
                date:date,
                date2:date2
            }


            return $http.get('url' + "&" + params.date + "-" + params.date2).then(function (response) {
                events = response.data.events;
                return response.data.events;
            });
        },

state...

  .state('date', {
    url: "/date/:date/:date2",
    templateUrl: "templates/Date.html",
    controller: "DateCtrl"
})

html...

       <input type="text" placeholder="bla1" class="form-control" ng-model="date"/>
<input type="text" placeholder="bla1" class="form-control" ng-model="date2" />

<a ui-sref="date({date:date,date2:date2})">Go</a>

EDIT:

The url i want to call is an external one, not a page within the app.

This is close $http.get with 2 parameter in ionic framework (angularjs)

But I'm not sure what I'm doing with the controller since in my code I have to scope a param.

EDIT 2:

this now works except that date2 is showing as "undefined" in the url string...

Matthew McClure · Accepted Answer · 2017-02-11 23:09:46Z

0

If I understand your question correctly, you want to perform a GET request and have more than one param passed into your request. This can be done in the following format:

$http.get('yoururl/:param1/:param2')

You can stack params using that syntax (as long as the URL does not exceed 2,000 characters), but you will need to make sure there is a '/' to divide each param you are passing in, otherwise it will come back as undefined. If you want to pass in an ambiguous number of params because you will not consistently be passing in the same amount, you can have one param and use:

JSON.stringify(object)

to pass in an object that can then be parsed on the other side to query from.

EDIT:

The code above is for defining your routes. What you're looking for is a bit different than my answer. You need is a way of defining the URL as you are calling it.

Try the following format:

var params = {
  date1: 'value1',
  date2: 'value2
}

$http.get('yoururl/' + params.date1 + '/' + params.date2)

This will insert the values of the object into the URL.

edited Feb 11, 2017 at 23:09

answered Feb 11, 2017 at 21:20

Matthew McClure

531 silver badge10 bronze badges

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

9 Comments

Kyle Over a year ago

AHH! I tried the stacking but I didn't include the "/"....I'll give it a try - thank you!

Kyle Over a year ago

This doesn't work unfortunately. It's doing the same error I encountered a few times with variations of this idea - its including the text "date1" "date2" but not the text that is input into the field.

Matthew McClure Over a year ago

GET requests don't take data in a separate parameter - they should be straight in the URL request. Unless urlr& is doing g something I'm unaware of, the way you are passing in your params with a comma and then an object is the format for a POST. You need to format your GET as I did above where they are within the url string being requested.

Kyle Over a year ago

So, what I want is to call web API and display data from a range of dates. These dates are set by the user via the input fields. However, when I did what you suggested, it literally appended the "param1/:param2" etc to the url. I don't know why. I'm new to ionic so im sure its a simple error - assuming it can be done of course, but as it is I can't seem to bind the input values to the params, and then append said params to the url. Also, I haven't scoped the second param in the controller, which i think is one of the problems, but i'm not how you "stack params" in the controller.

Matthew McClure Over a year ago

Ahh I just updated my answer to reflect what I think you're looking for. Check it out and let me know if that gets you going.

|

Collectives™ on Stack Overflow

Angular - combine multiple text inputs after a get http url

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related