json+fetch() 데이터바인딩 맛보기

✍️ 데이터 바인딩?

💡 데이터 바인딩은 앱 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스!

예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 합니다.

✍️ JSON ?

💡 복잡한 데이터를 유저와 공유할 수 있게 해주는 틀/형식 중 하나 데이터를 보여주는 가장 편리한 도구!

JSON(JavaScript Object Notation)은 사람이 읽을 수 있는 텍스트를 사용하여 데이터를 저장하고 전송하는 데이터 공유를 위한 개방형 표준 파일 형식입니다. J JSON은 JavaScript에서 파생되지만 언어 독립적인 데이터 형식입니다. JSON의 생성 및 구문 분석은 많은 최신 프로그래밍 언어에서 지원됩니다.

이외 데이터를 담는 형식은 여러가지 더 있다.

JSON 이전 일반적으로 이용되던 형식은 XML!

→하지만 불필요한 태그들이 많이 들어가 파일의 사이즈가 커지고 가독성이 좋지 않아 사용 빈도가 줄었다.

JSON은 현재 익스플로러 지원이 되지 않는다!

• XML

• CSV

• JSON

  …

---

• JSON 데이터 유형

개별 객체를 저장할 때는 “큰따옴표” 사용

동시에 여러가지 객체를 저장하고 싶을 때는 [대괄호] 또는 {중괄호} 안에 ,로 여러가지 자료를 삽입

이를 JS 에서는 아래와 같이 명칭하며,

작성하는데에 두가지 방법이 있다.

---

• array

[ ”문자1”, “문자2”, “문자3” ]

• object

{ ”이름” : ”문자1”, “문자2”, “문자3” }

어느것을 사용해도 상관없지만

object를 작성할 때는 “이름”을 작성해 주어야 하는 것이 원칙.

📍 json에서는 마지막 객체에 콤마를 붙이면 안 된다!

---

1. 문자

{ "name" : "choi" }

1. 숫자

{ "number_1" : 210 }

1. 참/거짓

{ "a" : true,
	"b" : false	}

1. null

{ "c" : null }

---

🐣 일단 해보기

🔸 json으로 데이터 만들어보기

{
    "items":[
        {
            "name":"철수",
            "age":20,
            "종족":["인간"]
        },
        {
            "name":"영수",
            "age":3,
            "종족":["오크","인간"]
        },
        {
            "name":"미수",
            "age":28,
            "종족":["엘프"]
        },
        {
            "name":"야수",
            "age":5,
            "종족":["고블린"]
        }
    ]
}

array, obeject를 활용해서 “items” 라는 이름을 만들고,

“name”, “age”, “종족”으로 구분되는 값을 넣어 주었다.

🔸 script _ fetch()문 - json 파일에 접속해서 통신하기!

// 기본이 되는 문법 //

fetch(url)
        .then(res=>res.json())
        .then(json=>{
            
        })

// .json 파일에 접속해서 통신하기! //

fetch('./data.json')//.json 파일 읽어 오기
    .then(res=>res.json())//읽어온 데이터를 .json으로 변환
    .then(json=> {
        data=json.items;//.json에 있는 items만 받아오기

        let html = ``; //공백의 변수 만들기
        data.forEach(element => {//foreach = 배열의 개수만큼 실행한다
           html+=`<li>${element.name} ${element.age}</li>`; //불러올 객체 설정
        });
        
        $('.list').html(html)//화면에 출력하기
        })

🖥️ 결과물

🔸 if - else문을 활용하여 데이터 가공하기!

fetch('./data.json')
    .then(res=>res.json())
    .then(json=> {
        data=json.items;

        let html = ``; 
        data.forEach(element => {

            if (element.age >= 20) {
                age = '성인';
            } else {
                age = '미성년자';
            }

           html+=`<li>${element.name} ${age}</li>`; //가공한 값은 가공된 변수를 써줘야 함
        });
        
        $('.list').html(html)
        })

🖥️ 결과물

🔸 filterDeta 사용하여 비교값 찾기!

fetch('./data.json')//.json 파일 읽어 오기
    .then(res=>res.json())//읽어온 데이터를 .json으로 변환
    .then(json=> {
        data=json.items;//.json에 있는 items만 받아오기

        filterData = data.filter(function(parm){
            
						console.log(parm.종족) 
						// 콘솔로그에 종족만 뿌려보기!
						console.log(parm.종족.indexOf('인간')) 
						//indexOf를 사용하여 array 안의 내용물 가져와 보기!'
            return parm.종족.indexOf('인간') >= 0;
						//'인간' 값을 포함한 데이터만 찾아 보기! 

        let html = ``; 
        filterData.forEach(element => { //이쪽도 filterData로 변경해야 함

            if (element.age >= 20) {
                age = '성인';
            } else {
                age = '미성년자';
            }

           html+=`<li>${element.name} ${age}</li>`;
        });
        
        $('.list').html(html)

        })
    })

🖥️ return parm.종족.indexOf('인간') >= 0; 결과물

🔸 filterDeta 사용하여 값 분류해 보기!

		<button data-type="인간">인간</button>
    <button data-type="오크">오크</button>
    <button data-type="엘프">엘프</button>
    <button data-type="고블린">고블린</button>
    
    <ul class="list"> //불러올 데이터를 담을 곳!
    </ul>

버튼을 누르면 분류된 값이 나오는 결과를 내기 위해 button 태그를 사용하여 버튼을 구현했다.

data-type 값을 통해 1차 분류를 시켜 주었다.

$('button').click(function(){
            type=$(this).data('type');
            list(type); //함수 호출 시, TYPE 값을 던져준다!
        })

       function list(tribe){ 
             fetch('./data.json')
            .then(res=>res.json())
            .then(json=>{
                data=json.items;
                filterData = data.filter(function(parm){
                    return parm.종족.indexOf(tribe) >= 0;
                })

                let html=``;
                filterData.forEach(element => { 
                    if(element.age >= 20){
                        age = '성인';
                    }else{
                        age = '미성년자';
                    }
                    html+=`<li>${element.name} ${age} ${element.종족}</li>`;
                });
                
                $('.list').html(html);
            })
        }

1. 클릭 이벤트를 통해 버튼을 누르면 type 값이 부르기
2. list 안에 type 값을 넣어 function list()와 fetch()문으로 json 내의 종족 값 불러오기

🖥️ 결과물

---

➕ 플러스

function list(isAdult){  //전달 받은 데이터값
             fetch('./data.json')
            .then(res=>res.json())
            .then(json=>{
                data=json.items;
                filterData = data.filter(function(parm){
                    if(isAdult == "성인"){
                        return parm.age >= 20; //20이상
                    }else{
                        return parm.age < 20; //20미만 
                    }
                })

                let html=``;
                filterData.forEach(element => { 
                    if(element.age >= 20){
                        age = '성인';
                    }else{
                        age = '미성년자';
                    }
                    html+=`<li>${element.name} ${age} ${element.종족}</li>`;
                });
                
                $('.list').html(html);
            })
        }

글자가 아닌 숫자 값을 넣는 것에서 헤맸다.

당연히 number를 이용해야 할 줄 알았는데 아니었다.

if-eles 문을 활용하여 return parm.age 값으로 충분히 원하는 범위를 만들 수 있었다.

또한 데이터 값이 숫자일지 문자일지 모르니 == 연산자를 이용하여 비교하기!