자바 스크립트를 너무 몰라..질문드립니다.
본문
추운겨울 감기조심하십시요
구글시트를 불러와 웹페이지에 게시하고있습니다.
for(var i=0; i < jsonData.rows.length; i++) {
var htmlData = "";
htmlData += "<li><p>" + jsonData.rows[i].c[0].v + "</p></li>";
$(".list ul").append(htmlData); // 데이터를 뿌려준다
console.log(jsonData.rows[i].c[0].v);
}
});
});
</script>
<ul class="greeting_info wow fadeInup" data-wow-duration="1s" style="overflow-x: auto;">
<li>
<p>상 품 명</p>
<p>단 위</p>
<p>수 량</p>
<p>중 량(Kg)</p>
<p>최고단가</p>
<p>최저단가</p>
<p>평균단가</p>
<p>누계수량</p>
<p>금 액</p>
</li>
</ul>
상품명 까진 불러와지나 그다음 단위,수량 등은 어떻게 불러와야할까요
php면 변수를 넣어 하나씩 불러올까도했는데 스크립트는 영 문외한이라 검색많이해보고 문의드립니다
감사합니다.
답변 3
원하는 데이터를 .c[0].v 로 불러왔듯이,
jsonData.rows[i] 찍어보고 그 안에 데이터들이 담겨있는지를 알아야할 것 같아요
jsonData.rows[i] 이게 너무 많다싶으면 jsonData.rows[i].c 를 찍어보고,
그래도 많다 싶으면 jsonData.rows[i].c[0] 을 찍어보고
이런식으로 원하는 데이터들이 묶인 객체를 찾는게 우선일 것 같아요
참고하세요.
<!-- jQuery 라이브러리 추가 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var spreadsheetId = "1234567890abcdefghijklmnopqrstuvwxyz"; // 구글 시트 문서 ID
var apiKey = "YOUR_GOOGLE_SHEETS_API_KEY"; // Google Cloud Console에서 발급받은 API 키
$.ajax({
url: `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/Sheet1!A1:J100`,
method: 'GET',
data: {
key: apiKey
},
success: function(response) {
var rows = response.values;
// 첫 행(헤더)을 제외하고 데이터 추가
for(var i = 1; i < rows.length; i++) {
var rowData = rows[i];
var htmlData = "<li>";
// 각 열의 데이터 추가
rowData.forEach(function(cellValue) {
htmlData += `<p>${cellValue}</p>`;
});
htmlData += "</li>";
$(".greeting_info").append(htmlData);
}
},
error: function(xhr, status, error) {
console.error("데이터를 불러오는 중 오류 발생:", error);
}
});
});
</script>
반복문에서 jsonData.rows[i].c 배열의 인덱스 접근 방식 때문입니다.
현재 로직에서는 c[0].v만 가져오고 있어 첫 번째 컬럼 값만 표시되기 때문에
단위, 수량, 중량(Kg) 등의 데이터는 누락됩니다.
해결책은 각 컬럼 인덱스에 따라 값을 가져오도록 코드를 수정하는 것입니다.
- 각 컬럼에서 해당 값을 불러오기
for(var i = 0; i < jsonData.rows.length; i++) {
var htmlData = "<li>";
htmlData += "<p>" + jsonData.rows[i].c[0].v + "</p>";
htmlData += "<p>" + jsonData.rows[i].c[1].v + "</p>";
htmlData += "<p>" + jsonData.rows[i].c[2].v + "</p>";
htmlData += "<p>" + jsonData.rows[i].c[3].v + "</p>";
htmlData += "<p>" + jsonData.rows[i].c[4].v + "</p>";
htmlData += "<p>" + jsonData.rows[i].c[5].v + "</p>";
htmlData += "<p>" + jsonData.rows[i].c[6].v + "</p>";
htmlData += "<p>" + jsonData.rows[i].c[7].v + "</p>";
htmlData += "<p>" + jsonData.rows[i].c[8].v + "</p>";
htmlData += "</li>";
$(".list ul").append(htmlData);
console.log(jsonData.rows[i].c.map(col => col.v).join(", "));
}
- 예시) 결과 (웹페이지)
<ul class="list">
<li>
<p>감자</p>
<p>kg</p>
<p>100</p>
<p>50</p>
<p>5000</p>
<p>3000</p>
<p>4000</p>
<p>1000</p>
<p>400000</p>
</li>
</ul>