javascript 질문

javascript 질문

QA

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 값을 입력해야 해당 채널의 영상 제목이 정확하게 출력됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT