Question

我有一个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>');
  });

＆＃39;＆＃39;在这种情况下，值是项目的名称（＆＃39; Baby Wrap＆＃39;，＆＃39; BMW＆＃39;等）。＆＃39; v＆＃39;值是附加的信息（v.img，v.price）。上面的代码使每个条目成为一个新行（现在我只是打印出项目名称）。我想要一个包含3列和多行的表来填充数据。

Answer 1

也许是这样的：

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

Answer 2

如果您循环浏览object，则可以获得每个键值对的index，如：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您需要每个子对象的内部循环来完成每一行。

＆＃13;

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"
    }
  }


}

＆＃13;

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

＆＃13;

Answer 4

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

Answer 5

我正在玩@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）。它创建了一个三列的n行表来显示数据。

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

5 个答案: