循环遍历数组并检索5个对象组-javascript

我有一个包含一些对象的数组，只想在数组中循环并一次输出4个。我会将每4个对象放入一个父div标记中，可能还有一个ul。不确定最好的方法。我相信有几种方法，希望从最干净的方法方面获得一些想法或反馈。谢谢

var data = [
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    }     
    ]

---

您可以迭代，只需跟踪当前组中有多少人，并在该组已满时启动一个新组。此代码将原始数组拆分为一组数组，其中每个组中的数字不超过所需的数字。然后，您可以使用该组数组创建所需的任何类型的输出：

function breakArrayIntoGroups(data, maxPerGroup) {
    var numInGroupProcessed = 0;
    var groups = [[]];
    for (var i = 0; i < data.length; i++) {
        groups[groups.length - 1].push(data[i]);
        ++numInGroupProcessed;
        if (numInGroupProcessed >= maxPerGroup && i !== (data.length - 1)) {
            groups.push([]);
            numInGroupProcessed = 0;
        }
    }
    return groups;
}

var groups = breakArrayIntoGroups(data, 5);

---

工作演示：

您可以迭代，只需跟踪当前组中有多少人，并在该组已满时启动一个新组。此代码将原始数组拆分为一组数组，其中每个组中的数字不超过所需的数字。然后，您可以使用该组数组创建所需的任何类型的输出：

function breakArrayIntoGroups(data, maxPerGroup) {
    var numInGroupProcessed = 0;
    var groups = [[]];
    for (var i = 0; i < data.length; i++) {
        groups[groups.length - 1].push(data[i]);
        ++numInGroupProcessed;
        if (numInGroupProcessed >= maxPerGroup && i !== (data.length - 1)) {
            groups.push([]);
            numInGroupProcessed = 0;
        }
    }
    return groups;
}

var groups = breakArrayIntoGroups(data, 5);

---

工作演示：

好的，我来玩。一个简单的选择是只在数组上迭代并放置4条记录，然后添加一个中断或任何您想要的分隔符，然后显示下一个4。继续执行此操作，直到阵列用完

var start = 0;
var el = document.getElementById('insertHere');
while (start < data.length) {
    for (var i = start; i < start + 4; i++) {    
    el.innerHTML += data[i].parent.firstname + " - " + data[i].parent.lastname + "<br />";
    }
    el.innerHTML += "<br/><br/>"
    start += 4;
}

var start=0；
var el=document.getElementById（'insertHere'）；
while（开始<数据长度）{
对于（var i=start；i”；
}
el.innerHTML+=“

”
开始+=4；
}

---

好吧，我来玩。一个简单的选择是只在数组上迭代并放置4条记录，然后添加一个中断或任何您想要的分隔符，然后显示下一个4。继续执行此操作，直到阵列用完

var start = 0;
var el = document.getElementById('insertHere');
while (start < data.length) {
    for (var i = start; i < start + 4; i++) {    
    el.innerHTML += data[i].parent.firstname + " - " + data[i].parent.lastname + "<br />";
    }
    el.innerHTML += "<br/><br/>"
    start += 4;
}

var start=0；
var el=document.getElementById（'insertHere'）；
while（开始<数据长度）{
对于（var i=start；i”；
}
el.innerHTML+=“

”
开始+=4；
}

---

类似的东西会对您的数据起作用，对不起-我使用了jQuery：

var grouperise = (function (g, a) {
    var groups = {};

    $.each(a, function (n, v) {
        var ng = Math.trunc(n/g);

        groups[ng] = groups[ng] || [];
        groups[ng].push(v);
    });

    var result = [];

    for (var index in groups) {
        result.push(groups[index]);
    }

    return result;
});

用法：

var groupies = grouperise(5, data);

console.log(groupies);

---

毫无疑问，有人会想出更聪明的办法……：-）

这样的东西会对您的数据起作用，对不起-我使用了jQuery：

var grouperise = (function (g, a) {
    var groups = {};

    $.each(a, function (n, v) {
        var ng = Math.trunc(n/g);

        groups[ng] = groups[ng] || [];
        groups[ng].push(v);
    });

    var result = [];

    for (var index in groups) {
        result.push(groups[index]);
    }

    return result;
});

用法：

var groupies = grouperise(5, data);

console.log(groupies);

---

毫无疑问，有人会想出更聪明的办法……：-）

您只需按如下方式在4个批次的阵列上循环：

for(i=0; i < array.length; i=i+4){
    i-1 // gives you fourth element in batch
    i-2 // gives you third element in batch
    i-3 // gives you second element in batch
    i-4 // gives you first element in batch
}

<代码>用于（i=0；i<数组长度；i=i+4）{ i-1//为您提供批次中的第四个元素 i-2//为您提供批量中的第三个元素 i-3//为您提供批处理中的第二个元素 i-4//为您提供批处理中的第一个元素 }

---

这对于长度为4的倍数的数组很有效，但如果不是这样，一次额外的检查也可以解决这一问题。

您只需按如下方式在数组上循环4次：

for(i=0; i < array.length; i=i+4){
    i-1 // gives you fourth element in batch
    i-2 // gives you third element in batch
    i-3 // gives you second element in batch
    i-4 // gives you first element in batch
}

for（i=0；i

---

这对于长度为4的倍数的数组很有效，但如果不是这样，一次额外的检查也可以解决这个问题。

您能否发布更多关于如何处理您得到的4个批次的详细信息？你会怎么处理它们？这将有助于提出一个解决方案。对于每4个，我会在父div下输出一些标记。可能在ul中。谢谢。这是一个很好的参考。你能发布更多关于你打算如何对待你得到的这批4人的细节吗？你会怎么处理它们？这将有助于提出一个解决方案。对于每4个，我会在父div下输出一些标记。可能在ul中。谢谢。这是一个很好的参考资料。很酷，我认为循环并将每4个数组放入一个新数组可能是最好的方法。@gregthewebbandit-我将代码转换为一个更通用的函数，并更新了演示JSFIDLE。@gregthewebbandit-我添加了一个更简单更快的版本。毫无疑问，更简单，但是第一个版本用for/if语句绘制了蓝图，对我的想法更为熟悉。感谢您将其作为一项功能展示。漂亮的slick@gregthewebbandit-第二个版本只是说，获取5项并将其分组。获取接下来的5项并将其分组，依此类推。如果你让一个人手动完成这样的任务，他实际上会这样做。这个人会数一数第1、2、3、4、5项，然后把它们放在一个新的组中。数一数第1、2、3、4、5项，然后将它们分组，依此类推，直到所有项目都消失。酷，我认为循环并将每4个数组放入一个新数组可能是最好的方法。@gregthewebbandit-我将代码转换为一个更通用的函数，并更新了演示JSFIDLE。@gregthewebbandit-我添加了一个更简单、更快的版本。毫无疑问，更简单，但第一个版本用for/if语句绘制了蓝图，对我的想法更熟悉一些。感谢您将其作为一项功能展示。漂亮的slick@gregthewebbandit-第二个版本只是说，获取5项并将其分组。获取接下来的5项并将其分组，依此类推。如果你让一个人手动完成这样的任务，他实际上会这样做。这个人会数一数第1、2、3、4、5项，然后把它们放在一个新的组中。数一数物品1、2、3、4、5，然后将它们分组，依此类推，直到物品全部消失。哈哈，别担心，你不会去jquery监狱的。很棒的解决方案，谢谢。哈哈，别担心，你不会去jquery监狱的。非常棒的解决方案，谢谢。