Javascript 使用jQuery JSON在每次第n次迭代后创建新表行

我有一个JSON变量：

{
  "Baby Wrap": {
    "img": "babywrap.jpg",
    "price": "150"
  },
  "BMW": {
    "img": "blackbmw.jpg",
    "price": "32,000"
  },
  "Samsung Galaxy S8": {
    "img": "galaxy.jpg",
    "price": "600"
  },
  "Motorcycle": {
    "img": "moto.jpg",
    "price": "37,000"
  },
  "Washer/Dryer": {
    "img": "washdry.jpg",
    "price": "1,300"
  },
  "Shoes (Women)": {
    "img": "shoes.jpg",
    "price": "350"
  },
  "Watch": {
    "img": "watch.jpg",
    "price": "430"
  },
  "Audi (2DR)": {
    "img": "whiteaudi2dr.jpg",
    "price": "38,000"
  }
}

还有一些jQuery：

var shopitems = JSON object;
var items = $.parseJSON(shopitems);
  $.each(items, function(k,v) {
    $("#shop").append('<tr><td>' + k + '</td></tr>');
  });

var shopitems=JSON对象；
var items=$.parseJSON（shopitems）；
$。每个（项目、功能（k、v）{
$（“#商店”）。附加（“+k+”）；
});

本例中的“k”值是项目名称（“婴儿包装”、“宝马”等）。“v”值为所附信息（v.img、v.price）。上面的代码使每个条目都成为一个新行（现在我只是打印项目名称）。我想要一个包含3列和尽可能多的行的表，以适合数据。

可能如下：

var i = 0;
var n = 3;
var shopitems = JSON object;
var items = $.parseJSON(shopitems);
  $.each(items, function(k,v) {
    i++;
    if(i%n == 0){
       $("#shop").append('<tr><td>' + k + '</td></tr>');
    }
  });

var i=0；
var n=3；
var shopitems=JSON对象；
var items=$.parseJSON（shopitems）；
$。每个（项目、功能（k、v）{
i++；
如果（i%n==0）{
$（“#商店”）。附加（“+k+”）；
}
});

如果通过

对象循环

可以获得每个键值对的

索引

，如下所示：

var shopitems={
“婴儿包装纸”：{
“img”：“babywrap.jpg”，
“价格”：“150”
},
“宝马”：{
“img”：“blackmw.jpg”，
“价格”：“32000”
},
“三星Galaxy S8”：{
“img”：“galaxy.jpg”，
“价格”：“600”
},
“摩托车”：{
“img”：“moto.jpg”，
“价格”：“37000”
},
“洗衣机/烘干机”：{
“img”：“washdry.jpg”，
“价格”：“1300”
},
"鞋(女):{
“img”：“shoes.jpg”，
“价格”：“350”
},
“手表”：{
“img”：“watch.jpg”，
“价格”：“430”
},
“奥迪（2DR）”：{
“img”：“whiteaudi2dr.jpg”，
“价格”：“38000”
}
}
var项目=商店项目；
变量键=对象键（项）；
$。每个（项目、功能（键、值）{
var指数=键。indexOf（键）；
console.log（索引，键）
//$（“#商店”）。附加（“”+键+“”）；
});
您需要每个子对象的内部循环来完成每一行


var shopitems=getData（）；
$。每个（商店商品、功能（k、v）{
//从主属性名称开始行和第一个单元格
var$tr=$（''）.append（$（''，{text:k}））；
//循环此行的其他属性向行中添加单元格
$。每个（v，函数（prop，val）{
//图像还是文本？
var cellContent=prop=='img'？$（''）.html（cellContent））；
});
//追加整行
$（“#商店”）。追加（$tr）；
});
函数getData（）{
返回{
“婴儿包装纸”：{
“img”：“babywrap.jpg”，
“价格”：“150”
},
“宝马”：{
“img”：“blackmw.jpg”，
“价格”：“32000”
},
“三星Galaxy S8”：{
“img”：“galaxy.jpg”，
“价格”：“600”
},
“摩托车”：{
“img”：“moto.jpg”，
“价格”：“37000”
},
“洗衣机/烘干机”：{
“img”：“washdry.jpg”，
“价格”：“1300”
},
"鞋(女):{
“img”：“shoes.jpg”，
“价格”：“350”
},
“手表”：{
“img”：“watch.jpg”，
“价格”：“430”
},
“奥迪（2DR）”：{
“img”：“whiteaudi2dr.jpg”，
“价格”：“38000”
}
}
}

var shopitems=JSON对象；
var items=$.parseJSON（shopitems）；
$。每个（项目、功能（k、v）{
$（“#商店”）。附加（“”+k+“”+v.img+“”+v.price+“”）；
});
我是在玩弄@MarkoMackic的创意，并提出了以下建议：

 var i = 0;
 var items = $.parseJSON(shopitems);
 $("#shop").append('<tr>');
 $.each(items, function(k,v) {
  if (i%3 == 0) {
    $("#shop").append('</tr><tr>');
  }

  $("#shop").append('<td>' + k + '</td>');

  i++;
 });

var i=0；
var items=$.parseJSON（shopitems）；
$（“#商店”）。附加（“”）；
$。每个（项目、功能（k、v）{
如果（i%3==0）{
$（“#商店”）。附加（“”）；
}
$（“#商店”）。附加（“+k+”）；
i++；
});

这正是我想要的（如果我不清楚@charlietfl，很抱歉）。它创建一个三列n行表格来显示数据。
预期结果是什么？您不想为此使用表列吗？您需要显示预期的输出。我不知道Object.keys（）方法。我一定会记住这一点，甚至可能会改变这一点。非常感谢。不能将
直接附加到
中，也不能像在代码编辑器中那样将结束标记附加到dom中。元素作为整体元素添加到dom中，您可以直接附加到元素，因为我这样做了。结束标记也是如此。但这并不意味着它可以跨浏览器工作。。。它不是有效的html。至于结束标签…他们没有做你所期望的
 var i = 0;
 var items = $.parseJSON(shopitems);
 $("#shop").append('<tr>');
 $.each(items, function(k,v) {
  if (i%3 == 0) {
    $("#shop").append('</tr><tr>');
  }

  $("#shop").append('<td>' + k + '</td>');

  i++;
 });