I know that the name of this question no longer makes sense, since objects are inherently disordered. BUT, I think if you look at this screenshot which is connected here, it will make more sense.
Image of two objects in my console.log
This is what happens. I create an object called $ scope.gameConfigs, which itself is created from the data that I get from the server call (condition object). This $ scope.gameConfigs creates a group of dropdown menus.
Basically what I'm trying to do is to drop down menus to display previously saved data if the data exists. When the saved data exists, the server returns an object with all the saved data. These data are numerically ordered. My problem is that this saved data is not always ordered in the same way as the data in $ scope.gameConfigs that I create, which leads to the appearance of empty fields in my dropdown menus.
If you look at the screenshot I'm associated with, you can see that the keys in $ scope.gameConfigs (the object with line 30 written next to it) are Map, Server and Mode.
The second object, which is the stored data returned from the server, is a group of objects, each of which has the name property (which is the name of the drop-down menu). If you look at this, you will get the command "Server", "Map" and "Mode".
My question is: how can I get the Saved Data object to copy the order of my $ scope.gameConfigs object? Is it possible? If not, what would be the best way?
Here is the HTML and controller that I have for my page / controller, if that helps at all:
<form class="form-horizontal" ng-controller="GamePreferenceCtrl"> <div ng-repeat="(name, section) in gameConfigs"> <label ng-bind="name"></label> <select class="form-control" ng-model="formData.settings[$index].value" ng-change="dropdownItemClicked(name, formData.settings[$index].value)"> <option value="" disabled="disabled">---Please Select Option---</option> <option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value"></option> </select> </div> <div class="col-md-12" ng-include="gametemp"></div> <div class="row"> <div class="hr-line-dashed"></div> <div class="text-center col-md-12 padding-15"> <button class="btn btn-primary btn-lg" ng-click="saveGameSetting()" formnovalidate translate> <i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i> Save </button> </div> </div> </form>
and controller:
function GamePreferenceCtrl($scope, $filter, Tournament, Notification) { $scope.$parent.child.game = $scope; $scope.selectedItems = []; $scope.formData = {}; $scope.loadConfig = function () { Tournament.loadGameConfig($scope.id).then(function (response) { $scope.gameConfigs = {}; if (response.data.tournamentPrefs) { _.each(response.data.tournamentPrefs, function (val) { if ($scope.formData.settings === undefined) { $scope.formData.settings = []; } $scope.formData.settings.push({section: val.name, value: val.value}); }); $scope.formData = {}; }; $scope.dropdownItemClicked = function(name, value) { if($scope.formData.settings === undefined) { $scope.formData.settings = {}; $scope.formData.settings[name] = value; } else { console.log('inside else'); $scope.formData.settings[name] = value; } }; _.each(response.data.provisions, function (val) { if ($scope.gameConfigs[val.section] === undefined) { $scope.gameConfigs[val.section] = []; } $scope.gameConfigs[val.section].push({name: val.key, value: val.value}); }); }); };
I know this is a long read, and I really appreciate anyone who could help me with this. Thanks!