javascript 질문
본문
//getVideoData.js
import 'babel-polyfill';
const getVideoData = async () => {
try {
// 사용자로부터 입력 받은 채널 ID 번호를 가져오기
const channelID = document.querySelector('.video-channel-input').value;
// API 요청을 통해 영상 데이터를 불러오기 (Use HTTPS)
const response = await fetch(`http://${window.location.hostname}:8090/data`);
const data = await response.json();
// 채널 ID에 해당하는 영상 제목들 추출
const videoTitles = data.results
.filter(video => video.channel === parseInt(channelID))
.map(video => video.name);
// 영상 제목을 출력하기
const videoTitleElement = document.querySelector('.video-title');
videoTitleElement.textContent = videoTitles.join(', '); // 제목들을 쉼표로 구분하여 출력
} catch (error) {
console.error('Error fetching video data:', error);
}
};
export default getVideoData;
//index.html
<html>
<body>
<h1>영상 검색기</h1>
<div>
채널 ID를 입력하세요:
<input type="number" min="1" value="1" class="video-channel-input" />
</div>
<div>
<span class="video-title"></span>
</div>
<button class="search-button">검색</button>
<script src="./index.js"></script>
</body>
</html>
//db.json
{
"data": {"count":1118,"next":null,"previous":null,"results":[
{ "name":"BIGBANG - '봄여름가을겨울 (Still Life)' M/V","url":"https://www.youtube.com/embed/JznlT2tWIXo", "channel" : 1 },
{"name":"IVE 아이브 'LOVE DIVE' MV","url":"https://www.youtube.com/watch?v=Y8JFxS1HlDo", "channel": 1},
{"name":"[4K] 장기하의 킬링벌스를 s라이브로! | 그건 니 생각이고, 싸구려커피, 땡큐땡큐, 그렇고 그런 사이, 빠지기는 빠지더라, ㅋ, 얼마나 가겠어, 부럽지가 않어 등","url":"https://www.youtube.com/embed/ImapK-6lOvA", "channel": 1},
{"name":"Cristiano Ronaldo first match for Real Madrid","url":"https://www.youtube.com/watch?v=Kwg_J99qQUI", "channel": 2},
{"name":"10점 만점에 10점' 손흥민 해트트릭 폭발… 토트넘, 4연승 질주","url":"https://www.youtube.com/watch?v=gqUiJtfJxyI", "channel": 2},
{"name":"영국축구중계진들이 손흥민 해트트릭 장면을 분석하다가골장면 직전 특이한 움직임을 보고 경악한 이유, ' 저걸 어떻게 막아!!' 월드컵 H조 각국 언론들 난리난 상황","url":"https://www.youtube.com/watch?v=DaLQM1ZkeMo", "channel": 2},
{"name":"[핫클립] 21세기 인류가 희망하는 에너지원 / YTN 사이언스","url":"https://www.youtube.com/watch?v=LsrsX8l-rag", "channel": 3},
{"name": "MIT Introduction to Deep Learning | 6.S191", "url":"https://www.youtube.com/watch?v=DaLQM1ZkeMo", "channel": 3},
{"name":"Blockchain Technology Explained (2 Hour Course)","url":"https://www.youtube.com/watch?v=qOVAbKKSH10", "channel": 3}]}
}
9개의 유튜브 영상 제목 데이터가 Mock 서버 (/mock/db.json)에 들어 있습니다.
채널 카테고리 해당하는 영상 데이터가 각 3개씩 있습니다.
• 음악: 1
• 스포츠: 2
• 과학기술: 3
영상 채널 ID 값(숫자)을 입력 받아 영상의 제목을 불러오려고 하는데 제가 쓴 getVideoData.js 으로는 화면에 영상 제목이 출력되지 않습니다ㅠㅠ 어떻게 바꿔야하나요?
채널값을 바꾸고 검색 버튼을 누르면 코드에 맞는 제목이 출력되어야 합니다.
답변 1
다음과 같은 방법으로 해 볼 수 있을 것 같습니다.
참고하셔서 원하시는 형식으로 구현하시면 될것으로 생각합니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>영상 검색기</title>
</head>
<body>
<h1>영상 검색기</h1>
<div>
채널 ID를 입력하세요:
<input type="number" min="1" value="1" class="video-channel-input" />
</div>
<div>
<span class="video-title"></span>
</div>
<button class="search-button">검색</button>
<script src="./index.js"></script>
</body>
</html>
getVideoData.js 파일 수정
import 'babel-polyfill';
const getVideoData = async () => {
try {
// 사용자로부터 입력 받은 채널 ID 번호를 가져오기
const channelID = document.querySelector('.video-channel-input').value;
// API 요청을 통해 영상 데이터를 불러오기 (Use HTTPS)
const response = await fetch(`/mock/db.json`); // Mock 데이터 파일 경로로 변경
const data = await response.json();
// 채널 ID에 해당하는 영상 제목들 추출
const videoTitles = data.data.results
.filter(video => video.channel === parseInt(channelID))
.map(video => video.name);
// 영상 제목을 출력하기
const videoTitleElement = document.querySelector('.video-title');
videoTitleElement.textContent = videoTitles.join(', '); // 제목들을 쉼표로 구분하여 출력
} catch (error) {
console.error('Error fetching video data:', error);
}
};
export default getVideoData;
index.js 파일추가
import getVideoData from './getVideoData';
document.addEventListener('DOMContentLoaded', () => {
const searchButton = document.querySelector('.search-button');
searchButton.addEventListener('click', getVideoData);
});
웹 페이지에서 "검색" 버튼을 클릭하면 입력한 채널 ID에 해당하는 영상 제목이 출력됩니다.
주의할 점은 Mock 데이터 파일인 db.json이 웹 서버 루트에 위치하고 있어야 하며, 또한 정확한 채널 ID 값을 입력해야 해당 채널의 영상 제목이 정확하게 출력됩니다.