Returning ZIP Code data in form

Asked

Viewed 2,033 times

3

I have the following problem: I am trying to fill in the fields street, city and state with the post informed. They’re all input. I’m using https://github.com/jbochi/cep My project is in Django, but I think you can return the data directly in the html page (front-end), since it is only fill and insert.

How do I do it? I tried with Angularjs, but I’m getting beat up.

Help me please.

html python angularjs django

  • Hello @Regis. How’s the code you made? There are several ways to do this, and to help you, you need a Minimum Example

  • @Regis posts his code.

2 answers

6


1) You need some url in your backend that accepts a zip code and returns u json. I mean, you will open in your browser: localhost:8000/api/consultacep/91370000 and you’ll see:

{'Localidade': u'Porto Alegre', 'Bairro': u'Vila Ipiranga', 'UF': u'RS', 'Logradouro': u'Rua Alberto Silva - at\xe9 965/966', 'CEP': u'91370-000'}

2) Somewhere in your controller you will make a call to this api and save the result in $Scope:

$http.get('/api/consultacep/91370000').success(function(local){ $scope.local_encontrado = local; });

3) In your template you need to show the attributes of $Scope.local_found. Do this using ng-model:

Localidade: <input type="text" ng-model="local_encontrado.Localidade"><br> Bairro: <input type="text" ng-model="local_encontrado.Bairro"><br> UF: <input type="text" ng-model="local_encontrado.UF"><br> <!-- etc -->

1

My friend @Tony Lamp gave me a little extra help!

Thanks @Tony Lamp

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>

<script>
    angular.module('app', []);
    angular.module('app').controller('MyCtrl', function MyCtrl($http, $scope){

        $scope.busca = function(){
            $http.get('http://api.postmon.com.br/cep/'+ $scope.cep).success(function(local){
                $scope.local_encontrado = local;
                console.log(local);
            });
        };

        $scope.enter = function(e){
            if(e.keyCode == 13){
                $scope.busca();
            };
        };
    });
</script>

Browser other questions tagged html python angularjs django

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