Error consuming web service with POST and GET in Angularjs

Question

Error consuming web service with POST and GET in Angularjs

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Hi, I have a problem that keeps me from moving forward. I have a Web Service in which it asks to enter coordinates (INPUT); these, if they are correct, will send in JSON format a list of the name of the nearby branches (OUTPUT).

You can see it here:

link

The issue is that I could not manage to send the parameters to get this information ( lat , long ) from FrontEnd.

Data:

Input:

lat ( float ): GPS latitude

long ( float ): GPS length
Output:

List of companies and branches with the following parameters: id_sucursal , direccion , nombre_empresa , distancia .

Access: link

Code: I understand this, I know it is wrong and I would like if you can help me to correct and complete it, please, and I have seen too many videos, I have been able to achieve connection with a get, without sending parameters, as in the courses, but this nothing.

function comotellames($scope, $http) {
    $http({
        url: 'http://saltala.cl/igniter/Appmovil/GetSucursales',
        method: "POST",
        data:
            latitud=  ???
            longitud= ??
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function (data, status, headers, config) {

        console.log(data)

        id_sucursal, direccion, nombre_empresa, distancia. ??

    }).error(function (data, status, headers, config) {
        console.log(error),
        $scope.status = status; 
    });

angularjs webservice ionic post http

asked by Hernan Humaña 01.09.2016 в 05:40

source

2 answers

Union of two variables to create a third array Divide an image into 4 equal parts using php

score 1 · Answer 1

Seeing the page that references it seems to me that the error is in how you use the promises. You are using success and error which are obsolete methods. Instead type then and catch , you also have some syntax errors.

You have to use ng-model in the input and then use the $scope with its corresponding binding to get the value

<input class="form-control" ng-model="lat">

is obtained using

$scope.lat

It should look like this

angular.module('app', [])
  .controller('CoordenadasCtrl', function($scope, $http) {
    $scope.enviar = function() {
      $http({
          url: 'http://saltala.cl/igniter/Appmovil/GetSucursales',
          method: "POST",
          data: {
            lat: $scope.lat,
            lng: $scope.lng
          },
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .then(function(response) {
          console.log('success');
          console.log(response.data)
        }).catch(function(error) {
          console.log('error');
          console.log(error);
        });
    };
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CoordenadasCtrl" class="form-horizontal">
  <div class="form-group">
    <label class="col-md-3 control-label">Latitud</label>
    <div class="col-md-9">
      <input class="form-control" ng-model="lat">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-3 control-label">Longitud</label>
    <div class="col-md-9">
      <input class="form-control" ng-model="lng">
    </div>
  </div>

  <button type="button" ng-click="enviar()" class="btn btn-primary">Enviar</button>
</div>

Note: The snippet does not work because it gives access denied. The code should work well on your server since it does not do CORS.

score 0 · Answer 2

The data field must be an object. It does not have the correct syntax, it should be something like:

data:
   {
     longitud:'xxx',
     Latitud:'xxxx'
   }

And it should work, besides the line that is after the console does not seem to make sense.

Greetings.