javascript - jQuery JSON으로 n 번째 반복마다 새로운 테이블 행 생성

어쩌면 이렇게 :

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>');
    }
  });

object 를 반복하는 경우  당신은 index 를 얻을 수 있습니다  다음과 같은 각 키-값 쌍의

var shopitems = {
  "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"
  }
}
var items = shopitems;
var keys = Object.keys(items);
$.each(items, function(key, value) {
  var index = keys.indexOf(key);
  console.log(index, key)
  //$("#shop").append('<tr><td>' + key + '</td></tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

각 행을 완성하려면 각 하위 오브젝트의 내부 루프가 필요합니다.

var shopitems = getData();
$.each(shopitems, function(k, v) {
   // start row and first cell from main property name
  var $tr = $('<tr>').append($('<td>', { text: k }));
  // loop over other properties for this row adding cells to row
  $.each(v, function(prop, val) {
    // image or text?
    var cellContent = prop === 'img' ? $('<img>', {src: val}) : val;
    $tr.append($('<td>').html(cellContent ));
  });
  // append whole row
  $("#shop").append($tr);
});
function getData() {
  return {
    "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"
    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="shop"></table>

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

@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++;
 });

이것은 내가 원하는 것을 수행합니다 (@charlietfl이 확실하지 않으면 죄송합니다). 데이터를 표시하기 위해 3 열 n 행 테이블을 만듭니다.