Extract JSON object item with Angular.js

Asked

Viewed 3,885 times

1

I have an Angular application that uses the Google Maps API to search for latitude and longitude, but I’m not getting the latitude and longitude separately.

My application works as follows, the user enters the zip code and the system using the Viacep API loads all the address data, also from the zip code the system uses the Google API to catch longitude and latitude

Controller

.controller("enderecoCtrl", enderecoCtrl);

  enderecoCtrl.$inject = ['$scope', 'CepService', 'LatLongService'];
  function enderecoCtrl($scope, CepService, LatLongService) {
    $scope.app = "Endereço";
    $scope.model = {};
    $scope.salvar = function(endereco) {

      $scope.model = {
        endereco: $scope.endereco.cep
      };

      CepService.getCep($scope.model).success(function(data, status) {
        $scope.valorEndereco = data;
        console.log(data);
        $scope.erroCep = false;

      }).error(function(data, status) {
        $scope.erroCep = true;
        console.log("Cep");
        console.log(status);
      });

      LatLongService.getLatLong($scope.model).success(function(data, status){
        var addresses = [];
        angular.forEach(data.results, function(item){
              angular.forEach(item.geometry.location, function(item){
                addresses.push(item);
            });
          return addresses;
        });
        $scope.latLong = addresses;
        console.log(data);
        console.log(addresses);
      });
    };
  

SERVICES

    module.factory('CepService', function($http) {

    var getCep = function(model) {
      return $http({
        url: "http://viacep.com.br/ws/" + model.endereco + "/json",
        method: "get"
      });
    };
    return {
      getCep: getCep
    };
  });


module.factory('LatLongService', function($http){

    var getLatLong = function(model){
      return $http({
        url: "http://maps.google.com/maps/api/geocode/json?address="+ model.endereco + "&sensor=false&region=$region",
        method: "get"
      });
    };
    return {
      getLatLong: getLatLong
    };
});

RESULT inserir a descrição da imagem aqui

It can be noted that comes the latitude and longitude together in only one Array, I would like them to come separately.

Note: This application is a learning application, but I have a real case to implement these two API in my work, so the use of Viacep when I could use only Google.

2 answers

2

You can access each item of the array using indexes, e.g..: objeto.propriedade[0] for the first item and objeto.propriedade[1] to the second.

With this you can create two variables, longitude and latitude and assign values to them, or even create new properties in the object that should contain this data: objeto.latitude = objeto.results[0] and objeto.longitude = objeto.results[1].

  • Both yours and Pedro’s answer are correct, they helped me a lot. Thank you

1


can try it inside your Success

     LatLongService.getLatLong($scope.model).success(function(data, status){
        var addresses = [];
        angular.forEach(data.results, function(item){
           addresses.push({latitude: item[0], longitude: item[1]});
        });
        $scope.latLong = addresses;
      });
  • It worked, but I decided to pass the values without pushing an array and it worked. Thanks.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.