google sheets
페이지 정보
본문
<?php
// index.php (PHP 파일 형태이지만, HTML+JS를 함께 작성)
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>구글시트 CSV → JSON (토글 버튼)</title>
</head>
<body>
<h1>구글시트 CSV → JSON 예시</h1>
<!-- 토글 버튼 추가 -->
<button id="toggleBtn">내용보기</button>
<!-- 테이블을 표시할 영역. 처음엔 숨긴 상태로 시작 -->
<div id="container" style="display: none; margin-top: 10px;"></div>
<script>
// 1) 구글 시트에서 “웹에 게시”로 얻은 CSV URL
const csvUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRVLVyfXbNfkgCKiX_k3ehsBa2j5eH4WeaGnjkrIJNOjIvxZ73wEyX_VEMRXpR1mg/pub?output=csv';
// 2) CSV → JSON 변환 함수
function csvToJson(csv) {
const lines = csv.split('\n').map(line => line.trim());
// 첫 줄(0번)은 헤더
const headers = lines[0].split(',');
const result = [];
for (let i = 1; i < lines.length; i++) {
const row = lines[i].split(',');
// 헤더 개수와 열 개수가 일치할 때만 처리
if (row.length === headers.length) {
const obj = {};
headers.forEach((header, index) => {
obj[header.trim()] = row[index].trim();
});
result.push(obj);
}
}
return result;
}
// 3) fetch로 CSV 가져와서 → JSON 변환 → 화면에 테이블로 표시
fetch(csvUrl)
.then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok. Status: ${response.status}`);
}
return response.text(); // CSV 형식이므로 text()로 받음
})
.then(csvData => {
const jsonData = csvToJson(csvData);
console.log('Parsed JSON:', jsonData);
const container = document.getElementById('container');
let html = '<table border="1" cellpadding="5">';
if (jsonData.length > 0) {
// 테이블 헤더
html += '<tr>';
Object.keys(jsonData[0]).forEach(header => {
html += `<th>${header}</th>`;
});
html += '</tr>';
// 테이블 본문
jsonData.forEach(item => {
html += '<tr>';
Object.keys(item).forEach(header => {
html += `<td>${item[header]}</td>`;
});
html += '</tr>';
});
} else {
html += '<tr><td>데이터가 없습니다</td></tr>';
}
html += '</table>';
// 테이블 HTML을 container에 삽입
container.innerHTML = html;
})
.catch(error => {
console.error('CSV 로딩/파싱 에러:', error);
});
// ★ 토글 버튼을 이용해 “container”의 표시/숨김을 제어하기 ★
const toggleBtn = document.getElementById('toggleBtn');
const containerDiv = document.getElementById('container');
let isShown = false; // 현재 표시 상태 추적
toggleBtn.addEventListener('click', () => {
isShown = !isShown;
containerDiv.style.display = isShown ? 'block' : 'none';
toggleBtn.textContent = isShown ? '내용숨기기' : '내용보기';
});
</script>
</body>
</html>
// index.php (PHP 파일 형태이지만, HTML+JS를 함께 작성)
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>구글시트 CSV → JSON (토글 버튼)</title>
</head>
<body>
<h1>구글시트 CSV → JSON 예시</h1>
<!-- 토글 버튼 추가 -->
<button id="toggleBtn">내용보기</button>
<!-- 테이블을 표시할 영역. 처음엔 숨긴 상태로 시작 -->
<div id="container" style="display: none; margin-top: 10px;"></div>
<script>
// 1) 구글 시트에서 “웹에 게시”로 얻은 CSV URL
const csvUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRVLVyfXbNfkgCKiX_k3ehsBa2j5eH4WeaGnjkrIJNOjIvxZ73wEyX_VEMRXpR1mg/pub?output=csv';
// 2) CSV → JSON 변환 함수
function csvToJson(csv) {
const lines = csv.split('\n').map(line => line.trim());
// 첫 줄(0번)은 헤더
const headers = lines[0].split(',');
const result = [];
for (let i = 1; i < lines.length; i++) {
const row = lines[i].split(',');
// 헤더 개수와 열 개수가 일치할 때만 처리
if (row.length === headers.length) {
const obj = {};
headers.forEach((header, index) => {
obj[header.trim()] = row[index].trim();
});
result.push(obj);
}
}
return result;
}
// 3) fetch로 CSV 가져와서 → JSON 변환 → 화면에 테이블로 표시
fetch(csvUrl)
.then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok. Status: ${response.status}`);
}
return response.text(); // CSV 형식이므로 text()로 받음
})
.then(csvData => {
const jsonData = csvToJson(csvData);
console.log('Parsed JSON:', jsonData);
const container = document.getElementById('container');
let html = '<table border="1" cellpadding="5">';
if (jsonData.length > 0) {
// 테이블 헤더
html += '<tr>';
Object.keys(jsonData[0]).forEach(header => {
html += `<th>${header}</th>`;
});
html += '</tr>';
// 테이블 본문
jsonData.forEach(item => {
html += '<tr>';
Object.keys(item).forEach(header => {
html += `<td>${item[header]}</td>`;
});
html += '</tr>';
});
} else {
html += '<tr><td>데이터가 없습니다</td></tr>';
}
html += '</table>';
// 테이블 HTML을 container에 삽입
container.innerHTML = html;
})
.catch(error => {
console.error('CSV 로딩/파싱 에러:', error);
});
// ★ 토글 버튼을 이용해 “container”의 표시/숨김을 제어하기 ★
const toggleBtn = document.getElementById('toggleBtn');
const containerDiv = document.getElementById('container');
let isShown = false; // 현재 표시 상태 추적
toggleBtn.addEventListener('click', () => {
isShown = !isShown;
containerDiv.style.display = isShown ? 'block' : 'none';
toggleBtn.textContent = isShown ? '내용숨기기' : '내용보기';
});
</script>
</body>
</html>
구글시트 CSV → JSON 예시
댓글목록
등록된 댓글이 없습니다.