How to set params in $http GET method to send data from dropdown Angularjs

Question

I have a modal window for creating new object As you can see there three forms: 1) simple input to create "Name"; 2) A dropdown with "Types" ; 3) A dropdown with "Ids"; I need to get data with types and Ids from DB, and as I can see in the browser and logs this part of process is going well, but when I fill all the forms and try to send them, there is always appears an Error, it happens because on server in variables "Types" and "IDs" written data from variable "Name", in short words it sent the data from input to all variables. This is a main question - why do it write data from input to all variables?? This is the html:

 <tr>
      <td class="collapsing">
        <label>{{localization.common[locale].name}}</label>
      </td>
      <td>
        <input type="text" placeholder="" ng-model="Name">
      </td>
    </tr>              
    <tr ng-controller="VirtualConnectorAddCtrl">
     <td class="collapsing">
       <label>{{localization.common[locale].VTypeID}}</label>
     </td>
    <td>
     <select class="ui dropdown VTypeID" ng-model="VTypeID">
       <option ng-repeat="item in virtualType" value= "'{{item.Id}}'">{{item.Name}}</option>
     </select>
    </td>
    </tr>  
    <tr ng-controller="VirtualConnectorAddCtrl">
      <td class="collapsing">
        <label>{{localization.common[locale].account}}</label>
      </td>
      <td>
       <select class="ui dropdown RunAsId" ng-model="RunAsId">
        <option ng-repeat="list in runAccount" value= "'{{list.RunAsAccountId}}'">{{list.RunAsAccountName}}</option>
      </select>
     </td>
    ....
    <div class="ui button blue" ng-click="createData(modal_id, Name, VTypeID, RunAsId)">{{localization.common[locale].add}}</div>

I had the same problem with creating "Account"(you can see on the image on left side menu: VirtualTypes, Account, VirtualConnectors), and there the issue was about $http params in controller

$scope.createData = function (obj, data, extra) {
....
      if ($scope.dictFilter == 'accounts') {
        $http({
                method: 'GET',
                url: appID + '/Insert_Methods.asmx/Insert_RunAsAccount',                    
                params: { name: data, pasword: data}
                }).then(function successCallback(response) {
                        Modals.close(obj)
                        getData();
                    }, function errorCallback(response) {
                    });
                    return;
                } ....

When I replace 'password:data' to 'password:extra' the problem was solved, but with "VirtualConnectors" I couldn't find the way to do this (all creating processes are initializes by function "createData", and I am trying to add new block to that function)

if ($scope.dictFilter == 'virtualConnectors') {
                $http({
                    method: 'GET',
                    url: appID + '/Insert_Methods.asmx/Insert_VirtualConnector',                    
                    params: {name: data, VtypeID: data, RunAsID:data }
                }).then(function successCallback(response) {
                    Modals.close(obj)
                    getData();
                }, function errorCallback(response) {
                    console.log("function createData doesn't callback");
                });
                return;
            }

maybe it's about params, in this case there three of them (actually 4, including obj "modal"), but function acccept only 2 arguments (actually 3 -including "obj"), the function works for other cases, and in other cases params do not always fit to arguments... In internet not much information about "params", so I can't understand the logic of binding html and controller here. Obviously, in html-file function CreateData take "modal_id", "Name", "VtypeID" and "RunAsId" as arguments so in the controller this function should be set with arguments that can take such types of data (obj, string, string, string), but there is (obj, data, extra), I've tried to change function arguments in the controller: $scope.createData = function (obj, data, extra, string) {... and it doesn't help... I think I should write another function for this case, but what arguments should I put? And one more thing: is it right to use form with options created by ng-repeat for such case (when I need to send a string that is a property of an object)?

Hey Dasha, I am not able to understand what's the actual question. Can you please correct the sentence and be more clear about your question. That being said, I can see ng-click="createData(modal_id, Name, VTypeID, RunAsId)" has 4 params where as in your js file $scope.createData = function (obj, data, extra) { is only able to handle 3 arguments. Please check if that's not the issue and let me know :) — Shashank Vivek
– Shashank Vivek, Commented Nov 14, 2018 at 16:43
Shashank Vivek, thank you for answer. You are right, of course, but how should I fix it? I'm sorry if it's hard to understand my explanation, english is not my first language. I've added a picture, and rewrited the question. — Dasha Custo
– Dasha Custo, Commented Nov 15, 2018 at 11:22
Sorry, but no =( when I call the function in html it nust have 4 params (with modal_id) because modal_id tell to the function what condition to take (the function is structured by "if"-blocks, and without modal_id function doesn't knoe what block to produce, so it shows log "data undefined"). Also I shouldn't put modal_id to the arguments (I've tried, it brings error). Your advice seems very logical to me, but it doesnt work. This app was created by another man, and I just trying to follow his logic, everything works, and this function working perfectly, I just need to understand this logic — Dasha Custo
– Dasha Custo, Commented Nov 21, 2018 at 7:51

Shashank Vivek · Accepted Answer · 2018-11-17 08:12:01Z

why do it write data from input to all variables?

Because, you are assigning data to all properties

params: {name: data, VtypeID: data, RunAsID:data }

you should do,

$scope.createData = function (modal_id, name, vTypeID, runAsId) {

and then:

  if ($scope.dictFilter == 'virtualConnectors') {
            $http({
                method: 'GET',
                url: appID + '/Insert_Methods.asmx/Insert_VirtualConnector',                    
                params: {name: name, VtypeID: vTypeID, RunAsID: runAsId } // <-- Check this line
            }).then(function successCallback(response) {
                Modals.close(obj)
                getData();
            }, function errorCallback(response) {
                console.log("function createData doesn't callback");
            });
            return;
        }

similarly, correct the params for 'accounts'.

There are several bad practices in your code as well:

using ng-controller on each <tr> tag. Use it on table level
Passing modal_id when it's not being used.
passing name in your case data as password. It doesn't make any sense to name variable incorrectly. IF its a name, you shouldn't use password to refer it.

I will suggest you to get your code reviewed by some expert to avoid "bad coding practices" that you are following in your code.

I hope my answer will help you :)

Collectives™ on Stack Overflow

How to set params in $http GET method to send data from dropdown Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related