[jQuery] $.getJSON 이용한 JSON 데이터 가져오기
jQuery를 이용해 JSON 데이터 가져오기
1. 준비 파일
base.css은 필수 파일이 아님.
2. 각 파일 내용
(1) ex1.json
[
{
"term": "BACCHUS. 바쿠스",
"part": "명사.",
"definition": "고대인들이 술에 취할 명분으로 편의상 만들어낸 신.",
"quote": [
"꼴딱꼴딱 마실수도 있고,",
"꿀꺽꿀꺽 마실수도 있다.",
"술독에 빠져 줄곧 마시기도 하고",
"찔끔찔끔 마시다 밤새 마시기도 한다."
],
"author": "애주가"
},
{
"term": "BACKBITE. 험담하다",
"part": "동사.",
"definition": "상대방에게 들킬 염려가 없을 때, 그에 관해 본 그대로를 입에담다."
},
{
"term": "BANG. 빵! 가지런한 앞머리",
"part": "명사.",
"definition": "총 쏘는 소리. 앞머리를 잘라 내린 여성의 머리모양."
},
{
"term": "BEGGAR. 거지",
"part": "명사.",
"definition": "고통스러워하는 부자에게 매정하게도 달라붙는 귀찮은 존재."
},
{
"term": "BELLADONNA. 벨라돈나",
"part": "명사.",
"definition": "이탈리아어로는 '우아한 부인'; 영어로는 극약의 일종. 두 언어가 본질적으로 동일하다는 것을 가리키는 뚜렷한 일례."
},
{
"term": "BIGAMY. 중혼죄",
"part": "명사.",
"definition": "이중 결혼을 말함. 취미상의 실수.."
},
{
"term": "BORE. 따분한 사람",
"part": "명사.",
"definition": "이쪽의 이야기를 들어주었으면 싶은 때에 저 혼자만 지껄이는 자."
}
]
3. 설명
(1) $.getJSON(url,callback)
1) 자바에서 static 메서드와 유사--> jQuery에서는 전역메서드라 불린다.
2) 첫번째 매개변수로 JSON 파일을 로드한다.
3) 두번째 매개변수(콜백함수)에서 JSON 파일을 이용하여 로드된 데이터를 처리한다. 콜백함수는 로드된 데이터를 인자로 넘겨받는다.(JSON 데이터를 참조하기 위해 data 변수를 사용하고 있다.)
(2) $.each()
$.each(collection, callback)
1) 매개변수
- collection: 순회할 배열이나 객체
- callback: 컬렉션의 각 요소를 대상으로 실행할 콜백 함수
callback 함수에서 첫번째 매개변수는 객체의 개수를 반환한다. index는 0부터 시작한다.
callback 함수에서 두번째 매개변수 객체의 key값을 반환한다. 반환된 key값을 이용하여 value값을 구할 수 있다.
2) 반환값: 컬렉션의 매개변수
1) 데이터 배열 혹은 컬렉션(data변수)을 순회하면서 각 아이템을 표현할 HTML을 생성한다.
2) 표준 for문을 사용해 배열을 순회하는 것을 $.each()로 대체하는 것이다.
3) $.each()를 사용해 각 항목을 반복 순회하면서 전달된 entry 맵의 내용으로 HTML 구조를 생성한다.
4) 모든 항목의 HTML이 작성되면 .html()을 사용해 <div id="dictionary">에 삽입하면 해당 <div>태그의 내용이 새로운 내용으로 변경된다.
출처: https://devbox.tistory.com/entry/jQuery-jQuery를-이용해-JSON-데이터-가져오기?category=578062 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'Javascript > jQuery' 카테고리의 다른 글
| [JQuery][TIP] Form submit 에서 동적으로 POST parameter 넘기기 (0) | 2021.01.06 |
|---|---|
| [jQuery] jQuery Quick API (0) | 2020.07.08 |
| [jQuery] jQuery Plugin을 이용한 form validation (0) | 2020.07.08 |
| [jQuery] dataType속성을 이용한 JSON 데이터 가져오기 (0) | 2020.07.08 |
| [jQuery] Ajax 데이터통신 기본 (0) | 2020.07.08 |
| [jQuery] 문서 준비 이벤트 (0) | 2020.07.08 |
| [jQuery] Ajax 설정 (0) | 2020.07.08 |
| [jQuery] Ajax 기초 (0) | 2020.07.08 |