이렇게 반복되는 작업을 해야될 때 button을 한 개씩 만든다면 많은 어려움이 있을 것이다. 이를 해결하기 위해 반복문을 사용하여 button을 만들어준다. 하지만 그 안에 들어가는 데이터는 모두 다르므로 JSON을 사용해서 데이터를 불러올 것이다.

JSON 이란?

JSON은 JavaScript Object Notation의 축약어로 데이터를 저장, 전송할 때 많이 사용되는 Data 교환 형식이다.

사용 방법

• 데이터 입력 방법
  Menu.json

{
    "id": 1,
    "department": "동아리연합회 부스",
    "menus": [
        { "name": "바나나 브륄레 + 아이스크림", "price": "2,000원" },
        { "name": "바나나 브륄레", "price": "1,500원" }
    ]
},

위와 같은 형식으로 작성할 수 있고, 한 개의 데이터 작성이 끝났다면 ,(콤마)를 사용하여 구분할 수 있다.

garden.js 일부

items.forEach(function(item){	// 받아온 응답 데이터로 반복문 실행
            const menusToShow = item.menus.slice(0,2);  // 메뉴를 2개씩만 표시되도록 설정
        
            const template =`
            <button>
            <div class="booth-box d-flex">
                <div><img src="./gardenImg/booth.png" alt="부스 이미지"></img></div>
                <div class="booth-info d-flex flex-column justify-content-center text-start">
                    <p class="boothtile mb-1">${item.department}</p>
                    <p class="boothsub mb-0">${menusToShow.map(menu=> `<span>${menu.name}</span><br/>`).join('')}</p>   <!--메뉴를 2개씩 표시되도록 설정-->
                </div>
            </div>
            </button>
            `;
            $(".boothSection").append(template);  
        })

• 반복문 forEach 사용
• const template에 `(백틱)을 사용해서 반복할 요소(버튼)를 넣어주었다.
• ``(백틱)으로 둘러싸인 문자열 안에서 ${}형식으로 JS표현식을 삽입할 수 있다.(이를 통해 동적으로 HTML 코드 생성 가능)
• boothSection이라는 클래스를 가진 요소에 Template 변수에 저장된 HTML 코드를 추가했다.(jQuery 문법)

---

garden.js 일부

fetch('Menu.json')
    .then(function(response){
    if(!response.ok){       // 응답이 성공적이지 않을 경우 에러
        throw new Error('에러에러에러');
    }
    return response.json(); // 응답을 잘 받았다면 응답 데이터 반환 후 다음 .then() 실행
    })
    .then(function(items){
  
  	/* 위의 garden.js 파일 부분 */
  
  })
    .catch(function(error){
        console.log(error);
    });

위의 코드는 JSON 파일을 받아오는 것이다.

• fetch 함수: 서버로 데이터를 요청하고, 응답을 받아오는 함수이다.
• .then(): 서버로부터 응답을 받으면 .then() 메소드로 응답 처리
• Response.json() JSON 형식 데이터 -> JS 객체로 반환
• Response.stringify() JS 객체 -> JSON 형식 데이터

위와 같이 해주면 JSON에서 부스의 정보(데이터)를 받아오고, 반복문을 통해 HTML 요소(버튼)을 반복 시킬 수 있었다.