자바스크립트에서 JSON 데이터를 이용하여 쇼핑 카트 생성하기

15 Sep 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 이용하여 쇼핑 카트를 생성하는 방법에 대해 알아보겠습니다.

JSON 데이터 가져오기

우선, 쇼핑 카트에 추가할 상품 정보를 담은 JSON 데이터를 가져와야 합니다. 이 예제에서는 다음과 같은 형식의 JSON 데이터를 사용합니다:

{
  "products": [
    {
      "name": "iPhone 12",
      "price": 999,
      "quantity": 1
    },
    {
      "name": "MacBook Pro",
      "price": 1999,
      "quantity": 2
    },
    {
      "name": "AirPods",
      "price": 199,
      "quantity": 3
    }
  ]
}

위와 같은 형식의 JSON 데이터를 가져오기 위해서는, fetch 함수를 사용하거나 AJAX를 이용할 수 있습니다. 데이터를 가져온 후에는 json() 메서드를 이용하여 JSON 형식으로 변환합니다.

fetch('products.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 이용하여 쇼핑 카트 생성하기
    createShoppingCart(data.products);
  });

쇼핑 카트 생성하기

JSON 데이터를 가져온 후에는 해당 데이터를 이용하여 쇼핑 카트를 생성할 수 있습니다. 쇼핑 카트에는 상품의 이름, 가격, 수량 등의 정보가 표시되어야 합니다.

function createShoppingCart(products) {
  const cartContainer = document.querySelector('#cart-container');

  // 각 상품을 순회하며 쇼핑 카트에 추가하기
  products.forEach(product => {
    const { name, price, quantity } = product;

    const cartItem = document.createElement('div');
    cartItem.classList.add('cart-item');

    const nameElement = document.createElement('h3');
    nameElement.textContent = name;
    cartItem.appendChild(nameElement);

    const priceElement = document.createElement('p');
    priceElement.textContent = `가격: ${price}원`;
    cartItem.appendChild(priceElement);

    const quantityElement = document.createElement('p');
    quantityElement.textContent = `수량: ${quantity}개`;
    cartItem.appendChild(quantityElement);

    cartContainer.appendChild(cartItem);
  });
}

위 코드에서는 forEach 메서드를 사용하여 각 상품의 정보를 가져와 쇼핑 카트에 추가하고 있습니다. 각 상품마다 h3 요소로 상품명, p 요소로 가격과 수량을 나타내며, 이를 쇼핑 카트 컨테이너에 추가하고 있습니다.

결과 확인하기

위 코드를 실행하면, JSON 데이터를 기반으로 쇼핑 카트가 생성되어 화면에 표시됩니다. 이를 확인하기 위해 HTML 파일의 쇼핑 카트 영역에 아래와 같은 코드를 추가합니다:

<div id="cart-container"></div>

모든 코드를 작성한 후에는 브라우저에서 HTML 파일을 열어 결과를 확인해보세요.

위와 같이 자바스크립트와 JSON 데이터를 이용하여 쇼핑 카트를 생성하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 기능을 추가할 수 있으니, 필요에 따라 유연하게 이용해보세요! #자바스크립트 #JSON