How to populate camunda html form Select from Json - camunda

Question

I am trying to populate camunda html form select from json sent from my external service client.
Here is my sent json -
{myData=[{"id":1,"name":"This is one","value":"value11","localName":"this is local name 11"},{"id":2,"name":"This is Two","value":"value22","localName":"this is local name 22"}]}
Here is my html form -
<form>
<div>
<select
cam-variable-type="String"
cam-variable-name="selected_option"
ng-options="item as item.name for item in myData track by item.id"
ng-model="selected"
class="form-control">
</select>
</div>
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() {
// tell the form SDK to fetch the variable named 'myData'
camForm.variableManager.fetchVariable('myData');
});
camForm.on('variables-fetched', function() {
// work with the variable (bind it to the current AngularJS $scope)
$scope.myData = camForm.variableManager.variableValue('myData');
});
</script>
</form>
But it is coming up like below as undefined -
And i can see my json myData in next step and it's values -
Any help on how to populate my html form select from my json myData
Thanks

Answer 1

You should parse your process variable, because it has String type
$scope.myData = JSON.parse(camForm.variableManager.variableValue('myData'));
Without parsing your select ng-options ran through every letter in your string, that's why you had so many options in select instead of two. Also you didn't set correct id for ng-options. It must be like this:
ng-options="item.id as item.name for item in myData track by item.id"