JSON이란?
JavaScript Object Notation의 약자로, Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이다.
데이터를 쉽게 교환, 저장하기 위하여 만들어졌다.
JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.
👉 fetch문
<script>
fetch(주소 or 파일) // json 파일 가져오기
.then((response)=>response.json()) // 가져온 데이터를 json 파일로 불러오기
.then((json)=>{ //json = 모든 데이터
//실행 부분
})
</script>데이터를 불러올때 쓰는 fetch문 문법
예전에는 아래 2가지를 썼다.
• ajax (비동기통신)
• getjson (제이슨파일)
👉 json 파일
name.json
{
"items":[
{
"이름":"피카츄",
"나이":50
},
{
"이름":"꼬부기",
"나이":50
},
{
"이름":"파이리",
"나이":10
}
]
}items 라는건 룰이다.
모든 데이터는 무조건 items 안에 다 들어간다.
❗️"items" 안에는
[] : 배열
{} : 객체
가 들어간다.
❗️json은 변수를 쓸 때는 모두 "" 따옴표를 써야한다.
❗️true, false는 따옴표를 쓰지 않는다.
❗️연결할 때엔 , (콤마)를 사용한다.
❗️마지막에는 , (콤마)가 기재되면 안된다. → "나이":50 여기 끝 부분
👉 반복문
for문
for (let index = 0; index < array.length; index++) {
const element = array[index];
}활용
for (let i = 0; i < 10; i++) {
console.log(i);
}
//해석
i=0 (1번) → i=0이고
0<10 (2번) → 0은 10보다 작고
console.log(i) (3번) → console.log 실행되고 = 0이 나오고
i++ (4번) → i를 증가시킨다
1~4번 순서대로 실행 후 다시 1번부터 4번, 또 1번부터 4번... 실행
!! 0부터 시작해서 i가 9일 때까지 실행한다.for문은 배열의 갯수를 셋팅해야 된다.
• index 부분은 내 마음대로 이름 지정 가능, 주로 i 라고 많이 씀
• array.length; = 배열의 길이 만큼 이라는 뜻
forEach문 (⭐️ 자주 사용)
array.forEach(element => {
});활용
동물=['치타','치치','타타','타치']
동물.forEach(el => {
console.log(el);
});
//해석
배열에 접근해서 하나씩 실행시켜준다.
forEach문은 '배열'이라고만 쓰면 나온다.
• array 에 배열을 쓰고
• element 부분은 내 마음대로 이름 지정 가능. el, item 등등
👉 예시
<body>
<ul class="list">
<!-- 지워도 되는 부분 -->
<li>
이름:피카츄,
나이:30,
</li>
<li>
이름:이상해씨,
나이:45
</li>
<!-- 지워도 되는 부분 -->
</ul>
<script>
function list(a){ //펑션이라는 함수를 만들고 아래 내용을 담음 = 함수만 만들었음
fetch('./name.json')
.then((response)=>response.json())
.then((json)=>{ // function(){} = ()=>{}
//이곳에 반복 돌려서 써주려고 함
allData = json.items; //array 부분에 아까 만든 배열을 써주려는데 헷갈리니까 변수로 만들기
result = allData.filter(function(param) { //param = 전달받는 값.
return param.속성.indexOf(a) >= 0 //return = 뱉어내다 / indexOf = 배열 안에 값이 포함되어있는지
})
let html=''; //html 빈 변수를 만들어놓고, 재할당 하려고 let 사용
result.forEach(element => {
age = (element.나이 >= 20)?'성인':'미성년자';
html+=`<li>${element.이름} // ${age} // ${element.속성}</li>`;
//+= = 증감. ``안의 내용을 배열 갯수만큼 html이라는 곳에 담고, html에 또 담는다. (갯수만큼 반복)
});
$('.list').html(html); //여기서 내용을 넣었으니 html에서 li 코드를 지워도 들어감
})
}
list('불'); //함수는 호출이라는걸 해야지만 실행이 됨. 불 이라는 요소를 list라는 함수에 던졌음.
//스크립트 전체 해석
1. '불'이라는 요소를 list라는 함수에 던졌고
2. list(a) 얘가 그걸 받아 먹었고
3. 그 a가 indexOf(a)로 가고
4. 그 값이 포함된 배열의 내용이 html에 담겨 나온다
</script>
</body>
//name.json 파일
{
"items":[
{
"이름":"피카츄",
"나이":40,
"속성":"전기,불"
},
{
"이름":"이상해씨",
"나이":50,
"속성":"물"
},
{
"이름":"파이리",
"나이":10,
"속성":"불,풀"
}
]
}indexOf
*indexOf() = 해당 텍스트가 배열 안에 있는지 알려준다. 값이 포함되어있는지!
"속성":"전기,불" 인 경우 console.log를 뿌려보면 숫자로 나오는데,
전기,불 = 4개의 문자
전 = 0
기 = 1
, = 2
불 = 3
에 해당된다.
//이 말은 즉슨,
0 이상일 때는 값이 있다는 말. 없으면 - 마이너스값이다.줄여서 쓴 if문
if (element.나이 >= 20) {
age='성인';
} else {
age='미성년자';
}
//if문을 줄인 것
age = (element.나이 >= 20)?'성인':'미성년자';
//해석
age가 (나이가 >= 20 이 조건이) → ?=참이라면 → 성인 / :=그렇지 않다면 → 미성년자=> 의 뜻
.then((json)=>{}) = .then(function(json){})
1. 펑션
function(){
}
2. 애로우 펑션
()=>{
}❗️Tip!
• es6에서 1번이 2번으로 바뀐 것으로, 1번=2번 같은 문법이다.
Web Publisher