Extract JSON object item with Angular.js

Question

Extract JSON object item with Angular.js

Navigation

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

1

I have an Angular app that uses the Maps API to fetch latitude and longitude, but I can not get latitude and longitude separately.

My application works as follows, the user types the zip code and the system using the ViaCEP API loads all data from the address, also from the zip code the system uses the Google API to get the 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

It may be noted that latitude and longitude come together in just one Array, I would like them to come apart.

Note: This application is a learning application, however I have a real case to implement these two APIs in my work, so I use ViaCEP when I could only use Google's.

http angularjs json array google-maps

asked by anonymous 10.03.2016 / 20:16

2 answers

2

You can access each item in the array using indexes, for example: objeto.propriedade[0] for the first item and objeto.propriedade[1] for the second.

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

11.03.2016 / 02:27

How to only allow letters and numbers in a text box Use clause "WHERE IN ()" IN SPRING BOOT JPA?

score 1 · Accepted Answer

You can try this within 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;
      });