JavaScript создает соответствующее количество строк и столбцов на основе длины списка - PullRequest
0 голосов
/ 04 июля 2019

Я изо всех сил пытался преобразовать следующий код 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», но я не смог заставить их работать так, как я ожидал.Я также подумал, что, может быть, смогу разбить первоначальный список на список словарей, но опять-таки не добился успеха.Возможно, я упускаю что-то очевидное.

1 Ответ

0 голосов
/ 05 июля 2019

В итоге оказывается, что я просто упустил очевидный ответ, Я нашел этот превосходный SO-ответ. Я посмотрел на слайс, но не мог наглядно представить, как использовать его для моей проблемы (очевидно, был долгий день).

Пост показал этот фрагмент:

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 элементов, он разбивается на массив, содержащий 3 списка по 2 элемента. Затем я просто создаю строку html, используя два цикла for для создания внешних строк начальной загрузки и классов внутренних столбцов. Возможно, есть более эффективный способ сделать это, но это сработало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...