CODEWITHSUNDEEP
ajaxjsonangularjsselect
Giox
Giox

Reputation: 5123

Prepopulate select option with JSON

I'm trying to pre-populate a form made with angularJS with previously inserted data using JSON Everything is working fine except for the select option items that are not populated.

A JSON example I'm using is:

{
"date": "2014-09-14",
"enumerator": "a",
  "monthreport": {
    "value": "March"
  },
  "weekreport": {
    "value": "2nd week"
  },
  "Maize": 23,
  "Wheat": 41,
  "Sorghum": 71,
  "q14": "Yes"
}

monthreport and weekreport are select option and they are not filled in when the form is loaded. q14 is a radiobutton, and it works fine as all the other input text field, both text and numeric. The JSON is the one produced exactly by angularJS, when I fill in the data in the form and then save it.

the select element is specified in this way in the HTML:

<select ng-model="currForm.weekreport" ng-options="o.value for o in options16" name="r_weekreport" required ></select>

and the options are set in the controller:

...
$scope.options16= [{value:"1st week"},{value:"2nd week"},{value:"3rd week"},{value:"4th week"},{value:"5th week"}];
...

To load JSON I use the usual function inside the app.controller:

...
 $http({
  method: 'GET',
  url: 'http://samplesite.com/formJSON.txt'
}).success(function(data, status) {
   console.log('works!!!   ' + data);
   $scope.currForm = data;  }).error(function(data, status) {
  // Some error occurred
   console.log(status);
})
...

it seems everything right... where I'm wrong??

Upvotes: 0

Views: 700

Answers (1)

ababashka
ababashka

Reputation: 2101

You can try:

<select ng-model="currForm.weekreport.value" ng-options="o.value as o.value for o in options16" name="r_weekreport" required ></select>

This happens because angular compares objects in your example and they are not equal. You need to compare primitives.

Upvotes: 2

Related Questions