자바스크립트에서 JSON 데이터를 이용하여 주소록 생성하기

15 Sep 2023

javascript

JSON 주소록

개요

이번 예제에서는 자바스크립트를 사용하여 JSON 데이터를 기반으로 주소록을 생성하는 방법을 알아보겠습니다. JSON(JavaScript Object Notation)은 가벼운 데이터 교환 형식으로, 주로 웹 애플리케이션에서 데이터를 전송 및 저장하는 데 사용됩니다. 이를 활용하여 주소록을 생성할 수 있습니다.

JSON 데이터 구조

먼저, 주소록에 저장할 JSON 데이터의 구조를 정의해야 합니다. 예를 들어, 각 연락처(entry)는 이름(name), 전화번호(phone), 이메일(email) 등의 속성을 가질 수 있습니다. 다음은 예시로 사용할 JSON 데이터 구조의 예입니다:

{
  "contacts": [
    {
      "name": "John Doe",
      "phone": "555-1234",
      "email": "johndoe@example.com"
    },
    {
      "name": "Jane Smith",
      "phone": "555-5678",
      "email": "janesmith@example.com"
    },
    ...
  ]
}

주소록 생성하기

이제 JSON 데이터를 이용하여 주소록을 생성하는 코드를 작성해보겠습니다. 먼저, JSON 데이터를 JavaScript 객체로 변환한 다음, 각 연락처를 순회하면서 HTML 요소를 동적으로 생성합니다. 각 연락처에 대한 정보는 <div> 요소로 묶어서 표시합니다.

// JSON 데이터를 JavaScript 객체로 변환
var addressBook = JSON.parse(jsonData);

// 주소록 출력을 위한 HTML 요소 선택
var addressBookContainer = document.querySelector('#addressBook');

// 각 연락처를 순회하면서 HTML 요소 동적 생성
addressBook.contacts.forEach(function(contact) {
  // 연락처 정보를 담는 div 요소 생성
  var contactDiv = document.createElement('div');
  
  // 이름 출력을 위한 span 요소 생성
  var nameSpan = document.createElement('span');
  nameSpan.textContent = contact.name;
  
  // 전화번호 출력을 위한 span 요소 생성
  var phoneSpan = document.createElement('span');
  phoneSpan.textContent = contact.phone;
  
  // 이메일 출력을 위한 span 요소 생성
  var emailSpan = document.createElement('span');
  emailSpan.textContent = contact.email;
  
  // contactDiv에 span 요소들 추가
  contactDiv.appendChild(nameSpan);
  contactDiv.appendChild(phoneSpan);
  contactDiv.appendChild(emailSpan);
  
  // 주소록 컨테이너에 contactDiv 추가
  addressBookContainer.appendChild(contactDiv);
});

위의 코드를 실행하면, JSON 데이터를 기반으로 주소록이 생성되고, 해당 주소록이 HTML 페이지의 주어진 컨테이너에 동적으로 표시됩니다.

마무리

이렇게 자바스크립트로 JSON 데이터를 이용하여 주소록을 생성하는 방법을 살펴보았습니다. JSON 데이터의 구조를 정의하고, JavaScript를 활용하여 해당 데이터를 처리하면 동적인 주소록을 구현할 수 있습니다. 이를 활용하여 다양한 웹 애플리케이션에서 주소록과 같은 데이터를 효과적으로 관리할 수 있습니다.

#javascript #JSON #주소록 #웹개발