javascript - 循环嵌套导致淘汰赛

Question

我有这个获取数据的获取/调用方法，并且基于 OnSuccess 它将进行另一个获取/调用以获取更多数据。我想显示从两个 get 方法返回的数据。

var getInfo = function () {
        Ajax.Get({
            Url: //URL,
            DataToSubmit: { id: properties.Id },
            DataType: "json",
            OnSuccess: function (data, status, jqXHR) {
                viewModel.PositionTypes = data; //ex return: Teacher, TA, Students

                Ajax.Get({
                    Url: //URL,
                    DataToSubmit: { pageNumber: 1, id: properties.Id },
                    DataType: "json",
                    OnSuccess: function (data, status, jqXHR) {
                        viewModel.Users = data;  //ex return: Matt, Steve, Maggie, Sandy

                        //Combine both results based on the Content Role 
                        //Some type of loop between the positionTypes and users where the content role will be equal
                    }
                });
            }
        });
    };

查看模型

// the ViewModel for a single User
    var userViewModel = function (data) {
        var _self = this;
        _self.ID = ko.observable(data.ID);
        _self.Name = ko.observable(data.Name);
        _self.Email = ko.observable(data.Email);
        _self.ContentRole = ko.observable(data.ContentRole);
    };

 // the ViewModel for a single Position
    var positionsViewModel = function (data) {
        var _self = this;
        _self.ContentRole = ko.observable(data.ContentRole);
        _self.PositionName = ko.observable(data.PositionName);
        _self.PositionRank = ko.observable(data.PositionRank);
        _self.UserCount = ko.observable(data.UserCount);
    }

这样整体结果将如下所示：

老师：Matt
助教：Steve
学生：Maggie、Sandy

Answer 1

试试这个，请注意它没有经过测试，可能会失败，如果您遇到错误，请告诉我，以便我们查看。另请注意，我可能使用 Knockout 虚拟绑定制作了一个类型

var viewUsersPositionModel = function(){
    var _self = this;
    _self.users = ko.observableArray();
    _self.position = ko.observable();
}

var viewModel = function(){
    var _self = this;
    _self.userPositions = ko.observableArray();
}

var userViewModel = function (data) {
    var _self = this;
    _self.ID = ko.observable(data.ID);
    _self.Name = ko.observable(data.Name);
    _self.Email = ko.observable(data.Email);
    _self.ContentRole = ko.observable(data.ContentRole);
};

// the ViewModel for a single Position
var positionsViewModel = function (data) {
    var _self = this;
    _self.ContentRole = ko.observable(data.ContentRole);
    _self.PositionName = ko.observable(data.PositionName);
    _self.PositionRank = ko.observable(data.PositionRank);
    _self.UserCount = ko.observable(data.UserCount);
}


var getInfo = function () {
    Ajax.Get({
        Url: //URL,
        DataToSubmit: { id: properties.Id },
        DataType: "json",
        OnSuccess: function (positionData, status, jqXHR) {
            Ajax.Get({
                Url: //URL,
                DataToSubmit: { pageNumber: 1, id: properties.Id },
                DataType: "json",
                OnSuccess: function (userData, status, jqXHR) {
                    var vm = new viewModel();
                    for(var i in positionData)
                    {
                        var position = positionData[i];
                        var userPositionViewModel = new viewUsersPositionModel();
                        userPositionViewModel.position(new positionsViewModel(position));
                        for(var j in userData)
                        {
                            var user = userData[j];
                            if(user.ContentRole === position.ContentRole)
                            {
                                userPositionViewModel.users.push(new userViewModel(user));
                            }
                        }
                        vm.userPositions.push(userPositionViewModel);
                    }
                    ko.applyBindings(vm);
                }
            });
        }
    });
};

HTML

<div data-bind="foreach: userPositions">
    <span data-bind="text: position.PositionName"></span>: <!-- ko foreach: users --> <span data-bind="text: Name"></span><!-- /ko -->
</div>