Json 데이터바인딩

1. data.json 파일을 만들어 item 을 선언해줍니다.

{
    "items":[
        {
            "이름":"영수",
            "나이":20,
            "freed":true,
            "fresh":true,
            "plus":true
        },
        {
            "이름":"영희",
            "나이":10,
            "freed":true,
            "fresh":false,
            "plus":true
        },
        {
            "이름":"영자",
            "나이":30,
            "freed":false
        }
    ]
}

2. data.html 파일에는 fetch문을 적어줍니다.

fetch('./data.json')
        .then((response)=>response.json())
        .then((json)=>{
            
        })

3.

fetch('./data.json')
        .then((response)=>response.json())
        .then((json)=>{

            data = json.items;
            let html = ``;

            freeEl = `<span class="badge free">무료배송</span>`;
            plusEl = `<span class="badge plus">1+1</span>`;
            freshEl = `<span class="badge fresh">신선보장</span>`;


            data.forEach(element => {

                // if(element.나이 >= 20){
                //     age='성인';
                // }else{
                //     age='미성년자';
                // }
                age=(element.나이 >= 20)?'성인':'미성년자';
                free = (element.freed)?freeEl:'';
                fresh = (element.fresh)?freshEl:'';
                plus = (element.plus)?plusEl:'';

                html+=`<li>${element.이름},,,,${age},,,${free}${fresh}${plus}</li>`;
            });
            $('.list1').html(html)

        })