Moving JSon Response into Dropdown - angularjs

Question

I have a Json Response as given below
JSON :
{
"json": {
"response": {
"servicetype": "1",
"functiontype": "10011",
"statuscode": "0",
"statusmessage": "Success",
"data": {
"assignedroles": [
{
"roleid": 162,
"rolename": "Admin",
"roleinformation": {
"A": [
{
"1st floor": 10
}
]
}
},
{
"roleid": 163,
"rolename": "Resident",
"roleinformation": {
"A": [
{
"1st floor": 10
}
]
}
}
],
"unassignedroles": [
{
"roleid": 36,
"rolename": "Product Managers",
"divisionlabel": "Department ",
"subdivisionlabel": "Category",
"roleinformation": {
"QA": [
{
"White Box Testing": 0
}
]
}
},
{
"roleid": 108,
"rolename": "Teacher",
"divisionlabel": "Class",
"subdivisionlabel": "Div",
"roleinformation": ""
},
{
"roleid": 115,
"rolename": "Staff",
"divisionlabel": "Class",
"subdivisionlabel": "Section",
"roleinformation": {
"1": [
{
"A": 0
}
]
}
},
{
"roleid": 116,
"rolename": "Student",
"divisionlabel": "Class",
"subdivisionlabel": "Section",
"roleinformation": {
"1": [
{
"A": 0
}
]
}
},
{
"roleid": 184,
"rolename": "CANt_MANAGE_Gbase",
"divisionlabel": "Division",
"subdivisionlabel": "SubDivision",
"roleinformation": {
"Div": [
{
"Sdiv": 0
},
{
"Sdiv1": 0
}
]
}
},
{
"roleid": 191,
"rolename": "Legend",
"divisionlabel": "a",
"subdivisionlabel": "b"
}
]
}
}
}
}
need to get rolename of both assigned and unassigned values from json response. I am able to get in two arrays, but couldn't work with moving both.
HTML:
<div class="form-group">
<label class="control-label col-sm-10" for="groupz">Select Role*</label>
<select class="form-control" name="role"
ng-model="model.rolename"
ng-change="GetAssignRole(model.rolename)">
<option selected>Select Roles</option>
<option ng-repeat="item in model.roles track by $index"
value="{{item}}">{{item}}</option>
</select>
<div>
JS:
UserService.getAssignRoles(json).then(function(response) {
if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success')
{
$scope.model.assignroles = [];
var resdata =response.json.response.data;
var unasresdata = response.json.response.data.unassignedroles;
var assresdata = response.json.response.data.assignedtoles;
$scope.model.assignroles.push(unasresdata);
$scope.model.assignroles.push(assresdata);
}
});
};
I couldn't figure out how to move both the datas into dropdown. If something is empty in assigned or unassigned , it gives undefined in response.But I am able to get two arrays inside assignRoles .

Answer 1

Concat unassignedroles[] and assignedroles[] to make single array.Just try below code.It might help u.
UserService.getAssignRoles(json).then(function(response) {
if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success')
{
$scope.model.assignroles = [],assignrolesArray = [];
var unasresdata = response.json.response.data.unassignedroles;
var assresdata = response.json.response.data.assignedtoles;
assignrolesArray = unasresdata.concat(assresdata);
$scope.model.assignroles = assignrolesArray;
}
});
HTML
<div class="form-group">
<label class="control-label col-sm-10" for="groupz">Select Role*</label>
<select class="form-control" name="role"
ng-model="model.rolename"
ng-change="GetAssignRole(model.rolename)">
<option selected>Select Roles</option>
<option ng-repeat="role in model.assignroles track by $index"
value="{{role.rolename}}">{{role.rolename}}</option>
</select>
<div>