2026, 새로운 도약을 시작합니다.

자바 스크립트를 너무 몰라..질문드립니다. 채택완료

추운겨울 감기조심하십시요

구글시트를 불러와 웹페이지에 게시하고있습니다.

 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>

662472500_1734506793.0795.png

상품명 까진 불러와지나 그다음 단위,수량 등은 어떻게 불러와야할까요

php면 변수를 넣어 하나씩 불러올까도했는데 스크립트는 영 문외한이라 검색많이해보고 문의드립니다

감사합니다.

답변 3개

채택된 답변
+20 포인트

반복문에서 jsonData.rows[i].c 배열의 인덱스 접근 방식 때문입니다.

현재 로직에서는 c[0].v만 가져오고 있어 첫 번째 컬럼 값만 표시되기 때문에

단위, 수량, 중량(Kg) 등의 데이터는 누락됩니다.

해결책은 각 컬럼 인덱스에 따라 값을 가져오도록 코드를 수정하는 것입니다.

- 각 컬럼에서 해당 값을 불러오기

Copy


for(var i = 0; i  jsonData.rows.length; i++) {

    var htmlData = "";

    htmlData += "" + jsonData.rows[i].c[0].v + ""; 

    htmlData += "" + jsonData.rows[i].c[1].v + ""; 

    htmlData += "" + jsonData.rows[i].c[2].v + ""; 

    htmlData += "" + jsonData.rows[i].c[3].v + ""; 

    htmlData += "" + jsonData.rows[i].c[4].v + ""; 

    htmlData += "" + jsonData.rows[i].c[5].v + ""; 

    htmlData += "" + jsonData.rows[i].c[6].v + ""; 

    htmlData += "" + jsonData.rows[i].c[7].v + ""; 

    htmlData += "" + jsonData.rows[i].c[8].v + ""; 

    htmlData += "";

    $(".list ul").append(htmlData); 

    console.log(jsonData.rows[i].c.map(col => col.v).join(", ")); 

}

- 예시) 결과 (웹페이지)

Copy




  

    감자

    kg

    100

    50

    5000

    3000

    4000

    1000

    400000

  



로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

답변감사드립니다
~/_

댓글을 작성하려면 로그인이 필요합니다.

참고하세요.

Copy






 



$(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 = "";

       

        // 각 열의 데이터 추가

        rowData.forEach(function(cellValue) {

          htmlData += `${cellValue}`;

        });

       

        htmlData += "";

        $(".greeting_info").append(htmlData);

      }

    },

    error: function(xhr, status, error) {

      console.error("데이터를 불러오는 중 오류 발생:", error);

    }

  });

});



로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

원하는 데이터를 .c[0].v 로 불러왔듯이,

jsonData.rows[i] 찍어보고 그 안에 데이터들이 담겨있는지를 알아야할 것 같아요

jsonData.rows[i] 이게 너무 많다싶으면 jsonData.rows[i].c 를 찍어보고,

그래도 많다 싶으면 jsonData.rows[i].c[0] 을 찍어보고

이런식으로 원하는 데이터들이 묶인 객체를 찾는게 우선일 것 같아요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고