Colin's Blog
자바스크립트에서 JSON 데이터를 이용하여 컨텐츠 필터링 기능 생성하기

이번 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 이용하여 컨텐츠 필터링 기능을 생성하는 방법을 알아보겠습니다.

필요한 준비물

JSON 데이터 파일 작성하기

JSON 데이터 파일을 작성하여 필터링할 컨텐츠를 정의합니다. 예를 들어, 다음과 같은 형태의 데이터를 가지고 있는 data.json 파일을 작성합니다.

[
  {
    "id": 1,
    "title": "컨텐츠 1",
    "category": "카테고리 A"
  },
  {
    "id": 2,
    "title": "컨텐츠 2",
    "category": "카테고리 B"
  },
  {
    "id": 3,
    "title": "컨텐츠 3",
    "category": "카테고리 A"
  },
  {
    "id": 4,
    "title": "컨텐츠 4",
    "category": "카테고리 C"
  }
]

HTML 파일 작성하기

필터링된 컨텐츠를 보여줄 HTML 요소를 작성합니다. 예를 들어, 다음과 같은 형태의 index.html 파일을 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>컨텐츠 필터링</title>
</head>
<body>
  <h1>컨텐츠 필터링</h1>

  <label for="category-select">카테고리 선택:</label>
  <select id="category-select">
    <option value="">전체</option>
    <option value="카테고리 A">카테고리 A</option>
    <option value="카테고리 B">카테고리 B</option>
    <option value="카테고리 C">카테고리 C</option>
  </select>

  <ul id="content-list"></ul>

  <script src="script.js"></script>
</body>
</html>

자바스크립트 파일 작성하기

data.json 파일을 로드하여 필터링 기능을 구현하는 자바스크립트 파일을 작성합니다. 예를 들어, 다음과 같은 형태의 script.js 파일을 작성합니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    const contentList = document.getElementById('content-list');
    const categorySelect = document.getElementById('category-select');

    function filterContent() {
      const selectedCategory = categorySelect.value;

      contentList.innerHTML = '';

      data.forEach(content => {
        if (selectedCategory === '' || selectedCategory === content.category) {
          const li = document.createElement('li');
          li.textContent = content.title;
          contentList.appendChild(li);
        }
      });
    }

    categorySelect.addEventListener('change', filterContent);

    filterContent();
  });

위의 자바스크립트 코드에서는 data.json 파일을 불러오고, 선택된 카테고리에 따라 필터링된 컨텐츠를 보여주는 기능을 구현합니다.

실행하기

작성한 HTML 파일을 웹 브라우저에서 실행하여 컨텐츠 필터링 기능을 확인해보세요. 카테고리 선택 셀렉트 박스에서 원하는 카테고리를 선택하면 해당 카테고리에 속하는 컨텐츠만 보여집니다.

마무리

이제 자바스크립트를 사용하여 JSON 데이터를 이용하여 컨텐츠 필터링 기능을 생성하는 방법을 알아보았습니다. 이를 활용하여 다양한 컨텐츠 필터링 기능을 구현할 수 있습니다. #자바스크립트 #JSON

© 2018 Colin. All rights reserved.