홈>
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
-
답변 # 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 행 테이블을 만듭니다.
관련 자료
- sql - 두 날짜 사이의 매초 날짜 테이블 만들기
- reactjs - 각 JSON 객체를 필터링하여 사용자 정의 가능한 React Table 생성
- Python은 20 자마다 줄 바꿈을 추가하고 새 문자열을 제공합니다
- javascript - Nodejs 일괄 처리는 루프를 사용하여 현재 디렉터리의 모든 폴더에 파일을 만듭니다
- r - 다른 테이블에서 간격이 겹치는 모든 행에 대해 한 테이블의 열에서 값 목록 인쇄
- vue.js - 프로덕션 빌드 후 vue js에서 API에 대한 서버 URL을 읽는 파일 생성
- java - axon - aggregate 생성 후 saga에서 다른 aggregate 생성 및 저장
- mysql - 내 테이블 생성 쿼리에 어떤 문제가 있습니까?
- 두 줄마다 셀레늄 파이썬에 쉼표를 추가하는 방법은 무엇입니까?
- r - 모든 행에 특정 문자열이있는 새 열 만들기
- dataframe - R의 동일한 열에 평균 ± SEM이 포함 된 요약 테이블을 어떻게 생성합니까?
- c# - Linux에서 SQLite DB로 ASPNet Core API 배포 후 '해당 테이블 없음'
- 특정 행과 열이있는 html 테이블을 만드는 방법
- Mysql - mysql - 삭제 후 shink 테이블
- sql - 첫 번째 삭제 후 다른 데이터베이스의 테이블에 삽입
- html - Bootstrap 4에서 새 항목을 추가 한 후 오버플로 될 때 테이블에 스크롤바 추가
- 프롤로그 목록의 모든 요소 뒤에 요소 삽입
- postgresql - 임시 테이블을 만들고 삽입 한 다음 pgsql 함수 내에서 선택합니다
- html - 테이블 내용 변경 후 DataTable 재 초기화
- laravel - 생성 후 편집하는 방법
관련 질문
- javascript - 계층/트리 형식으로 JSON 개체 인쇄
- javascript - JQuery의 ERR_ABORTED 429 (너무 많은 요청)
- 이 jQuery 코드를 바닐라 Javascript로 어떻게 변환합니까?
- javascript - HTML 양식 방법 대 jQuery 함수 유형
- json - javascript - 이 api 데이터에서 목록을 표시하는 방법
- 사용자 입력과 함께 JavaScript 가져 오기를 사용하는 OpenWeather API가 이전 데이터를 HTML 페이지에 유지
- jquery - javascript regex 내에서 변수를 전달하는 방법은 무엇입니까?
- javascript - Qlik Engine JSON API를 사용하여 시각화 데이터 내보내기
- javascript - 관련 div 전용 jQuery를 분리하고 추가하는 방법
- javascript - 필터 결과를 성공적으로 얻은 후 Laravel 8의 블레이드 파일에 표시하는 방법
어쩌면 이렇게 :