Angular ng-options display data from database

Question

EDIT : The code its ok, the problem was materialize select, did not work with dynamic angular elements, use the class browser-default instead of input-field and do not inizializate with jquery.

Hello I'm trying to display data in a select tag with angular I read a lot but I cannot solve this problem. As you can see with test code works but with the function does not. Need help. Thanks.

This is the JSON that PHP endpoint returns:

{
   "records":[
      {
         "numero":"312312"
      },
      {
         "numero":"31221111"
      },
      {
         "numero":"311241"
      },
      {
         "numero":"112441"
      },
      {
         "numero":"11312"
      },
      {
         "numero":"131"
      }
   ]
}

Controller:

 app.controller('chequeoCtrl', function($scope, $http) {
   //with this function do not work
   $scope.leerNumero = function() {
     $http.get("objetos/autoelevador/leer_numero.php").success(function(response) {
       $scope.data = response.records;
       console.log($scope.data);
     });
   };
   $scope.leerNumero();

   // with this array works, just for test!!
   /*$scope.names = [{"name":"pepe"},{"name":"pepe2"}];
   console.log($scope.nombres); */
 })

My select tag:

<select  ng-model="autoelev" ng-options="item.numero as item.numero for item in data">
  <option value="" disabled selected>Seleccionar autoelevador</option>
</select>

Prashant G · Accepted Answer · 2016-07-13 03:19:31Z

1

Try code below, Demo here:

View:

<body ng-controller="MainCtrl">
  <select ng-options="item.numero for item in data" ng-model="chosen">
      <option value="" disabled selected>Seleccionar autoelevador</option>
  </select>
</body>

Controller:

angular.module('app', [])
  .controller('MainCtrl', function($scope, $http) {
    $http.get('data.json')
      .then(function(res) {
        $scope.data = res.data.records;
        console.log($scope.data);
      });
  })

Do $scope.data = response.data.records in your controller and make sure its an array of options.

console.log($scope.data) in your controller should print as below:

[{"numero":"312312"},{"numero":"31221111"},{"numero":"311241"},{"numero":"112441"},{"numero":"11312"},{"numero":"131"}

edited Jul 13, 2016 at 3:19

answered Jul 12, 2016 at 20:03

Prashant G

4,9303 gold badges38 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Mars Over a year ago

it seems to be a problem with the data returned, i tried with a local function with the same data and it works but with the get function doesnt, i dont know why, both arrays are the same when i do consle.log!

Prashant G Over a year ago

try $scope.data = JSON.parse(response.data.records). your response could be string instead of JSON.

Mars Over a year ago

response.data.records i get TypeError: Cannot read property '3' of undefined and with JSON.parse(response.data.records) i get Unexpected token o in JSON at position 1 at Object.parse (native) btw with $scope.data = response.records; i can use ng-repeat normally the problem is just with ngOptions, its sems to be with external data problem, widh an array declared in the controller works fine

Mars Over a year ago

this is what console.log shows $scope.data = response.records; console.log( $scope.data );[Object, Object, Object, Object, Object, Object] console.log($scope.data[3] ); Object {numero: "112441"}

Mars Over a year ago

please check this image i explain a bit better, read the comments k60.kn3.net/25C5904DF.jpg

|

kafbuddy · Accepted Answer · 2016-07-12 19:51:55Z

0

According to the $http docs your response object has a data property which stores your data (https://docs.angularjs.org/api/ng/service/$http)

So you should use

$scope.data = response.data.records;

also the success function is deprecated. Please use

 $http.get("objetos/autoelevador/leer_numero.php").then(

answered Jul 12, 2016 at 19:51

kafbuddy

3042 silver badges5 bronze badges

Comments

Hajis Hakkim · Accepted Answer · 2018-02-19 07:14:01Z

You can select data from database using angularjs.

// Application module
var App = angular.module('myApp',[]);
App.controller("DbController",['$scope','$http', function($scope,$http){

// Function to get details from the database
getInfo();
function getInfo(){
// Sending request to sample.php files
$http.post('databaseFiles/sample.php').success(function(data){
// Stored the returned data into scope
$scope.details = data;
});
}

Details.php.

<?php
// Including database connections
require_once 'database_connections.php';
// mysqli query to fetch all data from database
$query = "   ";//write your select query
$result = mysqli_query($con, $query);
$arr = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$arr[] = $row;
}
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($arr);
?>

Collectives™ on Stack Overflow

Angular ng-options display data from database

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related