how to load a select with data coming from an Angularjs API

Asked

Viewed 1,048 times

1

Good night, I’m not able to carry a select in the Angularjs! It does not load, it is blank. I’ll post the code, if anyone can help me thank you!! Controller:

<script>
    angular.module("cadastroMedico", []);
    angular.module("cadastroMedico").controller("cadastroMedicoController", function ($scope, $http){
      $scope.app = "Cadastro de paciêntes";
      $scope.pacienteEspe = [
      ];

      var pacienteEspecial = function (){

      $http.get("http://localhost:27623/api/amb/Diseases/TESTES%20CUTANEOS%20DE%20LEITURA%20IMEDIATA").then(function (data) {
           $scope.pacienteEspe = data;
           console.log(data);
       }); 


      };

      pacienteEspecial();

    });
  </script>

index.html:

 <select class="form-control" ng-model="paciente.pacienteEspe" ng-options="pacienteEsp.Procedimento_tuss for pacienteEsp in pacienteEspe">
             <option value="">Selecione uma opcão</option>
           </select>

it does not load, it is as if the data were there, but it has nothing! I have tried everything.. If anyone can help it..

Thanks! Aqui está como ele fica

Console return: inserir a descrição da imagem aqui

  • 2

    Could show an example of JSON returned by API?

  • [ { "Id_amb92": 79, "Cod_amb92": "19010117", "Procedure_amb92": "IMMEDIATE READING SKIN TESTS", "Cod_tuss": "41401425", "Procedimento_tuss": "CONTACT TESTS - UP TO 30 SUBSTANCES", "Ch": "60" } ] Obs: when I display only the array {{patientEspe }} it shows me just that! And some information as API response in case 200.

  • @leonardobarussi Can you post on your question how is the JSON received from the server-side? I mean, it being shown on the console in the browser’s network tab, or even directly in the browser by calling the URL.

  • $scope.pacienteEspe = data.data;

  • @jbueno worked out! rapaaaaaaaaaz, it was almost 2 days banging head with this problem! Thank you very old!

  • All right!! @jbueno Voce could explain to me why I had to repeat the date?

  • Yes, look at the console.log. That is the return of the function get, the data returned from the server-side is in the property data of this return. It would be better if you gave a more descriptive name, as response or another equivalent. Do you understand? This object represents the entire answer and not only the data, the data is part of the answer.

Show 2 more comments

1 answer

2


In an initial analysis it seems to me that your code has no problem. What may be happening is that your application is not being initialized correctly.

Below is your code in functional state, with pre-loaded data and a view for iteration with the controller:

angular.module("cadastroMedico", [])
    .controller("cadastroMedicoController", function($scope) {
        $scope.app = "Cadastro de pacientes";
        $scope.pacienteEspe = [
            {
                "Id_amb92": 79,
                "Cod_amb92": "19010117",
                "Procedimento_amb92": "TESTES CUTANEOS DE LEITURA IMEDIATA",
                "Cod_tuss": "41401425",
                "Procedimento_tuss": "TESTES DE CONTATO - ATÉ 30 SUBSTÂNCIAS",
                "Ch": "60"
            }
        ];
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="cadastroMedico">

  <div ng-controller="cadastroMedicoController">
    <select class="form-control" ng-model="paciente.pacienteEspe" ng-options="pacienteEsp.Procedimento_tuss for pacienteEsp in pacienteEspe">
     <option value="">Selecione uma opcão</option>
    </select>
    <pre>{{paciente | json}}</pre>
  </div>
</div>

  • so, that’s it. When I manually load the array like Voce did, without the API playing JSON on it, select loads normally. The problem is when I load select with API JSONS. He is bringing me the value correctly, so that if I display what is inside the array when I load it with the API {{ patientEspe }} it displays me exactly the JSON I need, but when pressing select it shows me the image I presented above =/

  • Dude, with this code Voce sent out formatted, there’s been some changes. <pre>{{patient | json}}</pre> with this code, it shows when I click, the entire JSON of the API. However, it does not yet display in SELECT. He appears in white!

  • @leonardobarussi then your select is probably reading from the wrong scope. For testing purposes, change your ng-options to "pacienteEsp.Procedimento_tuss for pacienteEsp in $parent.pacienteEspe". This can happen if the content is inside a ng-if.

  • "patientEsp.Id_amb92 for patientEsp in $Parent.patientEspe" with this code it did not work. Now it does not display anything! I will create a new project, put only a select and try. I give news here if right! Just a moment

  • With that last code you informed he did not pick up. However now the SELECT appears "Undefined", it would be something I did not devini?

  • @leonardobarussi It still seems to me a matter of scope. You could post more of your code here?

  • of course! I made inline to test. I will post here and take a look!!

  • <script>&#xA; angular.module("cadastroMedico", []);&#xA; angular.module("cadastroMedico").controller("cadastroMedicoController", function ($scope, $http){&#xA; $scope.pacienteEspe = [&#xA;&#xA; ];&#xA;&#xA; var pacienteEspecial = function (){&#xA;&#xA; $http.get("http://localhost:27623/api/amb/listdiseases").then(function (data) {&#xA; $scope.pacienteEspe = data;&#xA; console.log(data);&#xA; }); &#xA; &#xA;&#xA; };&#xA;&#xA; pacienteEspecial();&#xA;&#xA; });

  • <body ng-controller="cadastroMedicoController">&#xA;&#xA; <div>&#xA; <select class="form-control" ng-model="paciente.pacienteEspe" ng-options="pacienteEspe.Id_amb92 for pacienteEsp in pacienteEspe">&#xA; <option value="">Selecione uma opcão</option>&#xA; </select>&#xA; <pre>{{paciente | json}}</pre>&#xA; </div>

  • I don’t know old, the array is identical to the json coming from the API. And it doesn’t work, I don’t change ANYTHING in select! With the array it displays me, not with the API. Shows a Undefined value!

  • It was worth the strength!! It worked.

  • @leonardobarussi I’m glad it worked! It was really a scope problem?

Show 7 more comments

Browser other questions tagged

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