본문 바로가기
  • Front Developer.
배송리마인더앱 다운로드
코딩저장소

구글스프레드시트 내용을 웹사이트에 json형식으로 가져올수있나요?

by 잠맹 2021. 12. 21.
728x90

Q. 구글스프레드시트 내용을 웹사이트에 json형식으로 가져올 수있나요?

예전에 사용하던 방식으로 구글시트의 셀내용을 웹에 실시간으로 가져오기 위해 시도해보았지만

구글의 접근정책이 바뀐건지 데이터가 불러와지지 않았다...(예전내용들은 생략) 

거두절미하고 찾아본결과 아래의 2가지 방법으로 가능했다

 

첫번째 방법) iframe으로 삽입하기 

'파일 > 공유 > 웹에 게시' 를 누른다

설명이미지

1. '삽입' 탭을 누른다.

2. 전체 문서를 누르면 원하는 시트를 선택가능

3. '문서가 수정되면 자동으로 다시 게시' 를 체크하면 수정한 내용이 동기화된다. (약 5분간격)

iframe태그 복사하여 사용

4. 생성된 iframe태그를 복사해서 원하는 웹사이트에 적용한다.

   - 테스트해본결과 수정한 내용이 바로 실시간으로 반영되지는 않았고,

     대략 5분간격으로 수정된 내용이 반영되었다. (이또한 정책이 수정된 듯하다)

 

 

 

두번째 방법) json형식으로 크롤링하여 가져오기

1. 구글시트내 주소창을 보면 https://docs.google.com/spreadsheets/d/ 와  /edit#gid=0 사이의 키값을 복사한다.

2. 아래 주소의 key= 와 &pub=1 사이에 붙혀넣는다.

http://spreadsheets.google.com/tq?key=이곳에 키값을 넣는다&pub=1 

링크를 치고 들어가면 해당문서의 내용이 json형식의 txt파일로 다운받아지는지 확인한다.

 

3. 아래 스크립트에 2번 주소값을 활용해 json으로 파싱하여 데이터를 뿌려준다

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart'] }).then(function () {
  var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=19istbTIcHGW19uunqbYXMb1EKGXyWSLTSuw3ApvPvZY&pub=1');
  query.send(function (response) {            
  var dataTable = response.getDataTable();
  var jsonData = dataTable.toJSON();            
  jsonData = JSON.parse(jsonData);

  for(var i=0; i < jsonData.rows.length; i++) {
    var htmlData = "";
    htmlData += "<li>" + jsonData.rows[i].c[0].v + "</li>";
    $(".list ul").append(htmlData);  // 데이터를 뿌려준다
    console.log(jsonData.rows[i].c[0].v);          
  }
  });
});
</script>

<div class="list">
  <ul>
	<!-- 데이터 리스트 -->
  </ul>
</div>

구글시트 화면

이방식도 구글시트의 수정된 내용이 실시간으로 크롤링이 되진 않고 약 5분뒤에 반영이 되는걸 확인했습니다.

감사합니다 :)

728x90
반응형

댓글