Member Avatar for Priti_P

Hello,
I want to show select list in angular js
Data is in .php file in json format as below:
["{\"0\":\"949\",\"user_id\":\"949\",\"gslab_id\":\"GS-0835\"}","{\"0\":\"493\",\"user_id\":\"493\",\"gslab_id\":\"GS-0451\"}","{\"0\":\"338\",\"user_id\":\"338\",\"gslab_id\":\"GS-0322\"}","{\"0\":\"961\",\"user_id\":\"961\",\"gslab_id\":\"GS-0843\"}","{\"0\":\"444\",\"user_id\":\"444\",\"gslab_id\":\"GS-0409\"}"]

what I have written till is
in my index.php file:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="myNoteApp.js"></script>

<body ng-app="mainApp">
    <div ng-controller="mainController">
        <select>
            <option ng-repeat="category in content" value="{{category.user_id}}">
                {{category.user_id}}
            </option>
        </select>
     </div>
</body>

And in myNoteApp.js file:

var myapp = angular.module('mainApp', []);
myapp.controller('mainController',function($scope,$http){
    $scope.content = null;
    $http({method: 'GET', url: 'allemployee.php'}).
        success(function(data, status, headers, config) {
            $scope.contents=data;
        }).error(function(data, status, headers, config) {          
    });
});
// allemployee.php file is php file containing json data

but it is not showing select values.
Where am wrong in this?

NOTE: @Admin, I did not see posts section for Angular JS. Request you to move it in that section if it is ut in wrong one.

  • 2 Contributors
  • 1 Reply
  • 179 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Traevel

Dani AI

Generated

Two things are preventing the select from showing values: a mismatched scope variable and the shape of the JSON coming back from PHP. correctly flagged the variable-name bug — the controller assigns one name while the view expects another — and the JSON you pasted looks like an array of JSON-encoded strings (each array element is a string containing JSON) instead of an array of objects.

Fix on the client (quick): make the controller assign the same scope property the view uses and, if needed, convert each JSON string into an object before binding. Example pattern:

angular.module('mainApp').controller('MainController', function($scope, $http){
  $http.get('allemployee.php').success(function(raw){
    // convert array-of-JSON-strings into array-of-objects
    if (angular.isArray(raw) && typeof raw[0] === 'string') {
      raw = raw.map(function(s){ return angular.fromJson(s); });
    }
    $scope.employees = raw; // make view use "employees"
  });
});

Better fix (server-side): return a proper JSON array of objects and send the JSON content-type. In PHP, build an array of associative arrays and json_encode once:

<?php
header('Content-Type: application/json; charset=utf-8');
$employees = [
  ['user_id' => '949', 'gslab_id' => 'GS-0835'],
  // ...
];
echo json_encode($employees);

Use ng-options in the view for a clean select binding:

<select ng-model="selectedUser"
        ng-options="e.user_id as e.gslab_id for e in employees track by e.user_id">
  <option value="">-- choose --</option>
</select>

Troubleshooting tips: open DevTools → Network and inspect the response body and Content-Type; console.log the raw data in the controller to confirm its structure; fix any naming typos between $scope and the template. Following ’s naming tip plus returning/parsing a true array of objects will resolve the issue.

Member Avatar for Traevel

And if you change $scope.contents to $scope.content?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.