How to make the data appear in the fields in Angularjs

Asked

Viewed 332 times

3

I’m coming in with a zip code and a search is made and brings me the other data... However, I want the data to be displayed, each in its own field, as they will be entered in the database. How to proceed?

html:

<body ng-controller="appController">
<div align="center">
<form>
<table width="100">
    <label>CEP </label><br>
    <input type="text" ng-model="endereco.cep" ng-blur="pegaCep()"><br>
    <label>Estado </label><br>
    <input type="text" ng-model="endereco.uf"><br>
    <label>Cidade </label><br>
    <input type="text" ng-model="endereco.cidade" size="30"><br>
    <label>Bairro </label><br>
    <input type="text" ng-model="endereco.bairro" size="30"><br>
    <label>Rua </label><br>
    <input type="text" ng-model="endereco.logradouro" size="30"><br>
</table>
</form>
</div>
</body>

controller:

app.controller('appController', function ($scope, $http){
$scope.endereco = {}
$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (endereco){
        console.log(endereco);
        $scope.endereco = endereco;
    });
 }

});

php:

<?php
ini_set('display_errors', true);
error_reporting(E_ALL);

$cep = $_GET['cep'];
//print_r($cep);

include('correios.class.php');
if(isset($_GET['cep'])){
$correios = Correios::cep($_GET['cep']);
$correios = json_encode($correios[0]);
    die($correios);
}elseif(isset($_GET['codigo_rastreio'])){
    die(json_encode(Correios::rastreio($_GET['codigo_rastreio'])));
}else{
    die('informe parametro GET cep ou codigo_rastreio');
}
?>

Retorno

php html angularjs

  • You can include an example of the content returned by the URL php/pegaCep.php ?

  • [{"customer":"","street":"Beco A (Estr Cristiano Kraemer)","neighborhood":"Vila Nova","zip":"91750073","city":"Porto Alegre","Uf":"RS"}]

3 answers

5

You are using the service $http. The returned object includes several parameters. Make the following changes to your code:

$scope.endereco = {};

$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (retorno){
        console.log(retorno);
        $scope.endereco = retorno.data;
    });
 }

Realize that the property data contains the value returned.

Object properties returned by $http service:

  • date – {string|Object} - the content of the reply, duly transformed.
  • status – {number} - HTTP code returned.
  • headers – {function([headerName])} - header return function.
  • config – {Object} - The configuration object of the original request.
  • statusText – {string} - HTTP status in text format.

Reference: https://docs.angularjs.org/api/ng/service/$http

  • Even with this change in code, the data does not appear.

  • @Gustavosevero In the browser log - you can confirm that endpoint is returning some content when called by the function, and not directly?

  • @lbotinelly would not be the case to use a $apply();? Or to directly assign the value to the field? ex.: $scope.endereco.logradouro = retorno.data.logradouro. I remember I’ve been there and that’s the only way

  • Yes, it is returning, I already posted the return of the data: [{"customer":""","street":"Beco A (Estr Cristiano Kraemer)","neighborhood":"Vila Nova","zip":"91750073","city":"Porto Alegre","Uf":"RS"}]

  • @Celsomtrindade, appears a message on the island saying that street is not recognized

  • @Celsomtrindade $apply() should only be used in special situations, where the model does not receive the spread of $Digest events. The current case seems very simple to me, and there would be no need.

  • @Gustavosevero if you are receiving this message the object is not correctly formed. Your error is another - the value sent as a parameter to the endpoint, or the service’s interpretation of the sent parameter.

  • I’ll post the endpoit for you to see. Check the post

  • @Gustavosevero something else - initialize the object $scope.endereco before using it in the view, thus ensuring that the $Scope.endereco.cep model exists. I updated my answer with an example.

  • See if this is what you suggested... I put in the post.

  • @Gustavosevero Yes, exactly. You are getting the same error?

  • Nothing, no dice show up.

Show 7 more comments

1

As an alternative to friend @lbotinelly’s reply, when I went through a similar situation, what solved my problem was to directly apply the value to each field, this way:

$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (retorno){
        $scope.endereco.cep = retorno.data.cep;
        $scope.endereco.logradouro = retorno.data.logradouro;
        //etc..
    });
};

Or the use of $apply() (ultimately).

If you still don’t solve your problem, make sure the console actually displays the data as you expect it to.

$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (retorno){
        console.log(retorno.data);
    });
}

Because the problem may not be in Angularjs.

Obs.:

Use my answer last, his is the right way.

  • Appears on the console "Cannot read Property 'cep' of Undefined""

  • What’s the comfort of it: console.log(retorno.data) showcase?

  • That: 0: Object neighborhood: "Vila Nova" cep: "91750073" city: "Porto Alegre" client: " patio: "Beco A (Estr Cristiano Kraemer)" Uf: "RS"

  • Can you print? I think your array is not being generated correctly

  • Follow the print in the post

  • strange.... try my answer, but instead of $scope.endereco.cep = retorno.data.cep; do as Nicholas proposes: $scope.endereco.cep = retorno.data[0].cep; see if it works.

  • I got it, I had to make adjustments in endpoint, in php, see in the post

  • Beauty! But avoid putting the problem resolution in the question. Put it as an answer, because if someone else has the same problem, they know how to solve it.

Show 3 more comments

0

[{"customer":"","street":"Beco A (Estr Cristiano Kraemer)","neighborhood":"Vila Nova","zip":"91750073","city":"Porto Alegre","Uf":"RS"}]

Since the php return is above, you need to do the following:

app.controller('appController', function ($scope, $http){
$scope.endereco = {}
$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (endereco){

        $scope.endereco = endereco.data[0];
    });
 }

});

now it’s gonna work

  • Appears on the console "Referenceerror: address is not defined"

  • I am based on the code Voce sent in the question, it is the same that is currently?

  • Sorry, I hadn’t made a change... Yes, it’s equal Now the response on the console is "Typeerror: Cannot read Property '0' of Undefined"

Browser other questions tagged php html angularjs

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