아래 코드를 ajaxtest.json 파일에 저장한다.
참고로 확장자명이 json이 아닌 js로 해도 무방하다.
{
"aaa": [
{
"aab1": "이정수",
"aab2": "이한수",
"2ban": "정수향"
}
],
"bbb": [
{
"bbc1": "이선태",
"bbc2": "이한아"
}
],
"아하": [
{
"aab1": "이정수",
"aab2": "이한수",
"2ban": "정수향"
}
],
"1아하": [
{
"aab1": "이정수",
"aab2": "이한수",
"하타루": "정수향",
"1하타루": "1정수향"
}
]
}
JSON의 형태는 우선 중괄호 {}를 써주고 그안에 카테고리 명을 쓴 뒤 :를 써주고 중괄호를 다시 써서 그안에 키, 밸류값을 넣어준다.
아래형태 처럼
{
"1하하": [
{
"aab1": "이정수",
"aab2": "이한수",
"2ban": "정수향"
}
]
}
그 다음, 아래 코드를 ajaxtest.html 에 넣어준다.
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(function() {
$.ajax({ type: 'get' ,
url: 'ajaxtest.json' ,
dataType : 'json' ,
success: function(data) {
console.log("접속 성공");
}
});
});
</script>
</body>
</html>
위 코드를 실했을 때, 제대로 json 파일을 가져온다면
아래와 같이 뜬다.
이제 json의 파일을 가져오는 예제를 해보겠다.
1. 최상위의 키들을 가져오고 싶을 때 (예: [aaa, bbb, 아하, 1아하])
console.log("접속 성공"); 아래에 아래와 같이 써준다.
console.log(Object.keys(data));
성공한다면 아래와 같이 나온다.
여기서 aaa만 선택하고 싶을 경우, 첫번째 배열에 있으므로 배열을 선택해준다.
console.log(Object.keys(data)[0]);
그러면 결과는 aa가 나온다.
2. "1아하" 같이 최상위 키의 밸류들을 가져오고 싶을 때
아래처럼 입력해준다.
console.log(data["1아하"]);하지만
배열형태로 뜬다.
크롬 console에서는 클릭하면 보이지만, undefined 상태이다. 왜냐하면 1아하 아래는 배열인데 정확한 배열명을 입력해주지 않았기 때문이다.
따라서 첫번째 배열을 [0]으로 지정해주면 정상적으로 뜬다.
console.log(data["1아하"][0]);
여기서 맨마지막 1정수향이 나오도록 해보자
console.log(data["1아하"][0].1하타루);
원칙적으로 위코드를 넣어주면 되지만 에러가 뜰것이다.
왜냐면 첫번째 문자가 숫자라서 그렇다.
첫번째 문자가 한글이어도 상관없지만 숫자면 제대로 읽어오지 않는다.
그럼 1을 빼고 그냥 "하타루"를 입력해본다.
console.log(data["1아하"][0].하타루);
정상적으로 값을 반환해줌을 알 수 있다.