>

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

이 경우 'k'값은 항목의 이름입니다 ( '베이비 랩', 'BMW'등). 'v'값은 첨부 된 정보 (v.img, v.price)입니다. 위의 코드는 모든 항목을 새로운 행으로 만듭니다 (지금은 항목 이름을 인쇄하고 있습니다). 데이터를 맞추기 위해 3 개의 열과 필요한만큼의 행이있는 테이블을 원합니다.


  • 답변 # 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>');
        }
      });
    
    

  • 답변 # 2

    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>
    
    

  • 답변 # 3

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

    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>
    
    

  • 답변 # 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>');
      });
    
    

  • 답변 # 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이 확실하지 않으면 죄송합니다). 데이터를 표시하기 위해 3 열 n 행 테이블을 만듭니다.

관련 자료

  • 이전 Lodash 하나 이상의 키로 필터링
  • 다음 JavaScript가 왜"0"을 기록합니까?