Javascript 如何将数组项显示到不同的div'；迭代时发生了什么？

在迭代一个数组时，我想将前两个数组项显示在第一个DIV中，将后两个数组项显示在第二个DIV中，依此类推。我取得了部分成绩，但我仍然认为这是不正确的。我如何做到这一点

我想在每个div下显示以下数组项，如下所示：

第一个列表： 铅笔，200 橡胶，250 第二个列表 夏普纳，300 潘，400

第三个列表 油漆，500 盒子，50

第一名单
第二份名单
第三名单

下面是我的功能

function myArray() {

  var arr1 = [];
  arr1 = [{
      "Item": "Pencil",
      "Quantity": 200
    },
    {
      "Item": "Rubber",
      "Quantity": 250
    },
    {
      "Item": "Sharpner",
      "Quantity": 300
    },
    {
      "Item": "Pen",
      "Quantity": 400
    },
    {
      "Item": "Paint",
      "Quantity": 500
    },
    {
      "Item": "Box",
      "Quantity": 50
    }
  ];

  var portion = arr1.length / 2;

  for (i = 0; i < arr1.length; i++) {
    //alert(arr1[i].Item+','+arr1[i].Quantity );
    if (i <= portion) {
      document.getElementById('one').innerHTML += arr1[i].Item + ',' + arr1[i].Quantity + '<br>';

    } else {
      document.getElementById('two').innerHTML += arr1[i].Item + ',' + arr1[i].Quantity + '<br>';

    }

  }

}

函数myArray（）{
var arr1=[]；
arr1=[{
“物品”：“铅笔”，
“数量”：200
},
{
“物品”：“橡胶”，
“数量”：250
},
{
“物品”：“夏普纳”，
“数量”：300
},
{
“项目”：“笔”，
“数量”：400
},
{
“物品”：“油漆”，
“数量”：500
},
{
“物品”：“盒子”，
“数量”：50
}
];
var部分=arr1.length/2；
对于（i=0；iif（i可能的解决方案之一是添加另一个嵌套循环来控制项目的部分，这样您就不需要
if
检查：

for (i = 0; i < arr1.length; i++) {
  for (j = 0; j < portion; j++) {
    document.getElementById('wrapper-'+i).innerHTML += arr1[i*portion+j].Item + ',' + arr1[i*portion+j].Quantity + '<br>';
  }
}


第一名单
第二份名单
第三名单
您可以做的是。声明节数。
部分
是一个变量，它将决定要为其显示数据的节数。要使其动态化（将来如果您需要更改节数，并且记录数更偶数），您可以使用基础数学在单个循环内完成所有这些操作

步骤1：通过
document.queryselectoral（“.best”）.forEach（e=>ids.push（e.getAttribute（“id”））获取所有节id

步骤2：通过
var party=arr1.length/4；声明份数；

步骤3：循环遍历数组并将数据作为
html
as追加

 var counter = -1;
arr1.map((e,i)=> {
     if(i%portion == 0)
     counter++;
      document.getElementById(ids[counter]).innerHTML += e.Item +","+e.Quantity+"</br>"

} )

var计数器=-1；
arr1.map（（e，i）=>{
如果（i%部分==0）
计数器++；
document.getElementById（ids[计数器]）.innerHTML+=e.Item+，“+e.Quantity+”
”
} )

下面是片段


函数myArray（）{
var arr1=[]；
arr1=[{
“物品”：“铅笔”，
“数量”：200
},
{
“物品”：“橡胶”，
“数量”：250
},
{
“物品”：“夏普纳”，
“数量”：300
},
{
“项目”：“笔”，
“数量”：400
},
{
“物品”：“油漆”，
“数量”：500
},
{
“物品”：“盒子”，
“数量”：50
},
{
“项目”：“ABC”，
“数量”：123
},
{
“项目”：“XYZ”，
“数量”：123
}
];
var部分=arr1.1/4长度；
var-id=[]；
document.querySelectorAll（“.best”）.forEach（e=>ids.push（e.getAttribute（“id”））
var计数器=-1；
arr1.map（（e，i）=>{
如果（i%部分==0）
计数器++；
document.getElementById（ids[计数器]）.innerHTML+=e.Item+，“+e.Quantity+”
”
} )
}

第一名单
第二份名单
第三名单
第四名单

const arr1=[{
“物品”：“铅笔”，
“数量”：200
},
{
“物品”：“橡胶”，
“数量”：250
},
{
“物品”：“夏普纳”，
“数量”：300
},
{
“项目”：“笔”，
“数量”：400
},
{
“物品”：“油漆”，
“数量”：500
},
{
“物品”：“盒子”，
“数量”：50
}];
让listNumber=1；
const template=arr1.reduce（（模板、项目、索引）=>{
如果（索引%2==0）{
返回模板+=
`
列表${listNumber++}
${item.item}，${item.Quantity}

`;
}
返回模板+=
`${item.item}，${item.Quantity}
`;
}, '')
常量结果tml=
`
${template}

`；
函数列表（）{
document.getElementById（'content'）.innerHTML=resultHTML；
}
document.getElementById（'btn'）。onclick=list；


 var counter = -1;
arr1.map((e,i)=> {
     if(i%portion == 0)
     counter++;
      document.getElementById(ids[counter]).innerHTML += e.Item +","+e.Quantity+"</br>"

} )