Question

我一直在努力将以下C＃代码转换为可在JavaScript中使用的代码：

var g = Model.List.GroupBy(r => Model.List.IndexOf(r) / 3).ToList();

它的用途是创建适当数量的行，其中包含适当数量的列。因此，例如，如果列表中包含6个元素，则可以让我创建3行，其中包含2列，而这些操作都是使用上面的GroupBy和下面的代码在剃须刀页面中完成的：

foreach (var parent in g)
{
       @Html.Raw("<div class='row'>");

       foreach (var item in parent)
       {
            // populate contents of row
       }

       @Html.Raw("</div>");
}

但是由于某些原因，我无法在Razor中做到这一点，并且需要在JavaScript中创建替代方法，但我正在努力寻找一种实现方法。

主要是因为我不完全了解“ GroupBy”如何创建组列表以及什么是合适的替代方案。

任何帮助，或指向正确的方向都很好。我已经尝试了一些在网上找到的用于创建“ GroupBys”的解决方案，但是我无法让它们按预期的方式工作。我还以为也许我可以将原始列表拆分成字典列表，但再次收效甚微。我可能缺少明显的东西。

Answer 1

最后，事实证明我只是错过了一个显而易见的答案，I found this excellent SO answer.我看了切片，但无法完全可视化如何将其用于我的问题（显然是漫长的一天）。

帖子显示了以下代码段：

var i,j,temparray,chunk = 10;
for (i=0,j=array.length; i<j; i+=chunk) {
    temparray = array.slice(i,i+chunk);
    // do whatever
}

最后，我的JavaScript代码如下所示：

var listdata = await octokit.repos.listForUser({ "username": "", "type": "owner" });

var chunk = 2;
var loop = 0;
var tempArray = [];
for (var s = 0; s < listdata.data.length; s += chunk) {
    tempArray[loop] = listdata.data.slice(s, s + chunk);
    loop++;
}

var htmlString = "";

for (var t = 0; t < tempArray.length; t++) {

    htmlString += "<div class='row'>";
    var innerArray = tempArray[t];

    for (var r = 0; r < innerArray.length; r++) {

        var repo = innerArray[r];

        htmlString += 
         "<div class=\"col-md-6 col-sm-6 col-xs-12\">" +
            "<div>" + repocontent + "</div>" +
         "</div>"
    }

    htmlString += "</div>";
}

因此，如果列表的长度为6，则将其拆分为一个数组，其中包含2个项目的3个列表。然后，我仅使用两个for循环创建html字符串，以创建外部引导程序行和内部列类。可能有一种更有效的方法来执行此操作，但这确实可以解决问题。

JavaScript根据列表长度创建适当的行数和列数

1 个答案: