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