Javascript 将JSON数组拆分为每行四项（同时保持所有内容都可见）

当我调用get api/home api端点时，我得到了一个特定的数据结构——有两个数组：一个用于书籍，一个用于杂志。我希望以每行四个项目的网格形式显示这些项目，但我不确定如何执行。我还需要保持这些项目（淘汰）的可观察性-在我的viewModel中，我有：

var mapping = {
        create: function(options) {
            //customize at the root level.  
            var innerModel = ko.mapping.fromJS(options.data);

            return innerModel;
        }
    };

    var homeViewModel = ko.mapping.fromJS(homeData, mapping);
    //debugger;
    return homeViewModel;

我认为：

<div class="row-fluid">
        <!-- ko foreach: books -->
        <div class="span3">
        </div>
        <!-- /ko -->

        <!-- ko foreach: magazines -->
        <div class="span3">
        </div>
        <!-- /ko -->
</div>

---

我在这个用例中所做的是使一个计算的可观察数组成为一个数组，第一级是行，第二级是列

var groupObsArray = function(itemsPerGroup,observableArray) {
    return ko.computed(function() {
        var obsArrData = observableArray();
        var groupedItems = [];
        var aGroup = [];
        for (var i=0;i<obsArrData.length;i++)
        { 
            aGroup.push(obsArrData[i])
            if(i%itemsPerGroup === 0) {
                groupedItems.push(aGroup);
                aGroup = [];
            }
        }
        return groupedItems;
    });
}
var mapping = {
    create: function(options) {
        //customize at the root level.  
        var innerModel = ko.mapping.fromJS(options.data);

        return innerModel;
    }
};

var homeViewModel = ko.mapping.fromJS(homeData, mapping);

homeViewModel.MagazineRows = groupObsArray(4,homeViewModel.magazines);
homeViewModel.BookRows = groupObsArray(4,homeViewModel.books);

var-groupObsArray=function（itemsPerGroup，observableArray）{
返回ko.computed（函数（）{
var obsArrData=observableArray（）；
var groupedItems=[]；
var aGroup=[]；
对于（var i=0；iWow！正是我想要的。谢谢scaryman，我现在就试试这个。
var groupObsArray = function(itemsPerGroup,observableArray) {
    return ko.computed(function() {
        var obsArrData = observableArray();
        var groupedItems = [];
        var aGroup = [];
        for (var i=0;i<obsArrData.length;i++)
        { 
            aGroup.push(obsArrData[i])
            if(i%itemsPerGroup === 0) {
                groupedItems.push(aGroup);
                aGroup = [];
            }
        }
        return groupedItems;
    });
}
var mapping = {
    create: function(options) {
        //customize at the root level.  
        var innerModel = ko.mapping.fromJS(options.data);

        return innerModel;
    }
};

var homeViewModel = ko.mapping.fromJS(homeData, mapping);

homeViewModel.MagazineRows = groupObsArray(4,homeViewModel.magazines);
homeViewModel.BookRows = groupObsArray(4,homeViewModel.books);

<div class="readingMaterials magazines" data-bind="foreach:MagazineRows">
    <div class="row-fluid" data-bind="foreach:$data">
        <div class="span3" data-bind="text:title">
        </div>
    </div>
</div>