[json] json 개념과 json 데이터를 이용하여 테이블 만들기

 json 

https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80  참조

JSON이란 무엇인가?

Java Script object Notation

JSON (JavaScript Object Notation)

• JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
• Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
• JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.
• JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.

JSON 특징

• 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.
• 자바스크립트 객체 표기법과 아주 유사하다.
• 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있다.
• JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.
• 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐이다.
• 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
• 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

XML vs JSON

데이터를 나타낼 수 있는 방식은 여러가지가 있지만, 대표적인 것이 XML이고, 이후 가장 많이 사용되는 것이 아마도 JSON일 것이다.

XML

• 데이터 값 양쪽으로 태그가 있다.
  (HTML을 근본으로 했기에 태그라는 것이 없을 수가 없는데, 그 태그를 줄인다 해도 최소한 표현하려면 양쪽에 몇글자씩이 있어야 한다.)

JSON

• 태그로 표현하기 보다는 중괄호({}) 같은 형식으로 하고, 값을 ','로 나열하기에 그 표현이 간단하다.

 

json 자동정렬 기능

ctrl + shift + F

 

 

---

자바스크립트 문법과 비교

<자바스크립트>

- 자바스크립트에서는 (자바와 다르게) 서로 다른 자료를 배열에 담을 수 있다. 
[ 11 , 22, 33 ]
[ "홍길동", 24, "서울시"] 

let jsObj = {  
"name" : "홍길동",
"age" : 24,
"count" : [95, 100, 75],
func:function(){
console.log("function() 호출");
}
}
console.log(jsObj.name);   // 홍길동 출력

 

이때 콘솔창에 100점이 나오게 하려면

console.log(jsObj.count[1]);  // 100 출력

 

<json>

- json은 한쌍으로 관리한다.
  -- > 한쌍(pair) key : value == HashMap (java)

- key값은 문자열로 만드는게 일반적이다. ex) "kye" : "value"

- 배열로 관리할 수 있다
[ "홍길동", 24, "서울시"] -> [ "name" :"홍길동", "age":24, "address" : "서울시" ]

- 배열을 블록괄호로 관리한다.
{ "name" :"홍길동", "age" :24, "address" : "서울시" }

- 키값 하나만 쓸 수도 있다.
{"name" : "홍길동"}

- 대표적 사용예제

[
{ name: "홍길동", age:24, address: "서울시" },
{ name: "성춘향", age:16, address: "남원시" },
{ name: "일지매", age:22, address: "부산시" }
]

---

key(name) 얻어오기

https://docko.tistory.com/708

Javascript에서 Json Object의 Key(name), Value 쉽게 얻기

for in 문으로 얻어온다.

	for(key in json[0]){
		table += "<th>" + key + "</th>";	
	}

---

형변환 (parsing) 

문자열은 json 형의 데이터로 바꿔줘야한다

 

문자열->숫자형 : JSON.parse

let json = JSON.parse(str);
// alert(json);     // [object ObJECT] 반환

숫자형 -> 문자열 : JSON.stringify()

 

: JavaScript 객체를 JSON 문자열로 변환

 

---

특정 데이터 꺼내는 방법

<p id="demo"></p>
<script type="text/javascript">
let json = [
	{
		"name":"홍길동",
		"age":24,
		"height":172.2
	},
	{
		"name":"성춘향",
		"age":16,
		"height":156.9
	},
	{
		"name":"일지매",
		"age":22,
		"height":181.3
	}
];
// 성춘향과 성춘향의 height 꺼내는 방법
document.getElementById("demo").innerHTML = json[1].name + " " + json[1].height;

</script>

---

json 파일과 연결해서 데이터 꺼내는 방법

1. json 파일과 연결시키기 

- xml 에서 연결시킨 방식과 동일하게 xhttp 로 읽어오고, function-open-send 의 절차를 거친다.

  https://coday.tistory.com/3 참조

  1. XMLHttpRequest()를 통해 오브젝트 생성을 한다.

  2. function을 실행한다.

  3. open() 함수를 통해 메소드 방식, url, 그리고 비동기 여부를 설정한다.

  4. send(data) 로 설정한 방식대로 request를 보낸다.(data는 null이어도 된다.)

 

2. 형변환 + 데이터 꺼내기

 

형변환 + 데이터 꺼내기

function jsonFunc(resp){

	
//     JSON.parse : string -> json (가져온 문자열 json 형식으로 변경하기)
	let json = JSON.parse(resp); 
	alert(json.length); //3 반환 : object(객체) 3개니까

/* 	stringify  : json -> string (확인용)
 	지금은 문자열에서 넘어왔지만 애시당초 json 데이타일 때 json 내부를 보고싶을 때 사용
	alert(JSON.stringify(json)); // 문자열들 반환됨 */

//  3개 넘어왔으니까 무조건 배열로 넘어왔을 것!
	document.getElementById("demo").innerHTML = json[2].address;// 부산시 반환
    
//  < jsonfile data >
[
{
	"name" : "홍길동",
	"age" : 24,
	"address" : "서울시",
	"height" : 171.2
},
{
	"name" : "성춘향",
	"age" : 16,
	"address" : "남원시",
	"height" :  156.9
},
{
	"name" : "일지매",
	"age" : 22,
	"address" : "부산시",
	"height" :  181.2
}
]

응용 - 전체 데이터 꺼내보기

// 전체 데이터 찍어보기
	let txt = "";
	for(i = 0;i < json.length; i++){
		txt += 		json[i].name + " " 
				+	json[i].age + " "
				+	json[i].address + " "
				+	json[i].height + "<br>";
	}
	
	document.getElementById('demo').innerHTML = txt;
}
/* 	반환값
	홍길동 24 서울시 171.2
	성춘향 16 남원시 156.9
	일지매 22 부산시 181.2  */

 

json 활용예제 - 아래의 json 파일로부터 데이터를 꺼내는 방법

{
    "quiz": {
        "sport": {
            "q1": {
                "question": "Which one is correct team name in NBA?",
                "options": [
                    "New York Bulls",
                    "Los Angeles Kings",
                    "Golden State Warriros",
                    "Huston Rocket"
                ],
                "answer": "Huston Rocket"
            }
        },
        "maths": {
            "q1": {
                "question": "5 + 7 = ?",
                "options": [
                    "10",
                    "11",
                    "12",
                    "13"
                ],
                "answer": "12"
            },
            "q2": {
                "question": "12 - 8 = ?",
                "options": [
                    "1",
                    "2",
                    "3",
                    "4"
                ],
                "answer": "4"
            }
        }
    }
}

문제1. Which one is correct team name in NBA? 을 반환해라

document.getElementById("demo").innerHTML = json.quiz["sport"].q1.question;

-  sport는 quiz의 배열 0번지이다. 따라서 배열형식 -> ["sport"]라고 쓴다. 
-  q1은 단 하나니까 키값으로 그냥 q1이라고 쓴다

- question도 배열이니까 배열 형식 ["question"] 으로 출력 가능하다.

  --> document.getElementById("demo").innerHTML = json.quiz["sport"].q1["question"];

- sport는 문자열이기 때문에 0번지라고 설정하면 출력이 불가능하다. 
  --> document.getElementById("demo").innerHTML = json.quiz[0].q1.question;

 

문제2. Golden State Warriros 을 반환해라

 document.getElementById("demo").innerHTML = json.quiz["sport"].q1.options[2];

 

과제 : json 데이터를 이용하여 테이블 만들기

<json데이터>

[
	{
	"title" : "아바타",
	"score" : 8.83,
	"open_day" : "2022/12/14",
	"director" : "제임스 카메론"
	},
	{
	"title" : "어바웃타임",
	"score" : 9.3,
	"open_day": "2013/12/05",
	"director" : "리차드 커티스"
	},
	{
	"title" : "이프온리",
	"score" : 9.24,
	"open_day" : "2004/10/29",
	"director" : "길 정거"
	},
	{
	"title" : "노트북",
	"score" : 9.48,
	"open_day" : "2004/11/26",
	"director" : "닉 카사베츠"
	},
	{
	"title" : "미비포유",
	"score" : 8.78,
	"open_day" : "2016/06/01",
	"director" : "테아 샤록"
	}
]

 answer 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 
		movie.json
		
		본 영화 5개 
			제목 : title
			평점 : score
			개봉일 : openday
			감독 : director
 -->

<div id="movies"> </div>

<script type="text/javascript">

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
	if(this.readyState == 4 && this.status == 200){
		movieFunc( this );
// 여기서 꼭 this.responseText로 받을 필요 없고 아래에서 호출해도됨
	}	
}
xhttp.open("GET", "movie.json", true);
xhttp.send();

function movieFunc( resp ) {	
// 함수호출을 function 밑에서 하는 방법!	
	let jsonDoc = resp.responseText;
	// alert(jsonDoc);

// parsing : 넘어온 데이타 형변환
	let json = JSON.parse(jsonDoc);	
	// alert(json); // 5개의 object가 넘어옴
	
// 테이블 만들기	
	let table = "<table border='1'>"; // 테이블 시작
	table += "<col width='50'><col width='100'><col width='80'><col width='100'><col width='120'>";
	
	table += "<tr>"; // tr 시작
	table += "<th>번호</th>"; // 번호 th 생성
	
// key값 불러와서 테이블 column에 넣기
//  (json의 0번지로 가져오면됨 - 5개 객체의 key값이 모두 동일하므로)	
	for(key in json[0]){
		table += "<th>" + key + "</th>";	
	}
	
	table += "</tr>"; // tr 닫기
	
// 데이터 불러와서 td에 넣기
	
for(i = 0;i < json.length; i++){
	
	table += "<tr>";		
	table += "<th>" + (1 + i) + "</th>"; // 번호열에 넣을 번호값
		
/* 하드코딩으로 데이터값을 td에 넣는 방법
		table += "<td>" + json[0].title + "</td>";
		table += "<td>" + json[1].score + "</td>";
		table += "<td>" + json[2].openday + "</td>";
		table += "<td>" + json[3].director + "</td>";
*/

// key값 이용하여 데이터값을 td에 넣는 방법

// 이렇게 하면 첫번째 key값부터 시작해서 데이터 넘어오게됨
// 코딩순서 : json[0].title , json[0].score ~~ json[3].open_day, json[3].director
// 이렇게 가로 의 순서로 값이 나오고 이 순서대로 td 테이블에 들어감
		for(key in json[0]){
			table += "<td>" + json[i][key] + "</td>";
			console.log(json[i][key] );
		} 
		
		table += "</tr>";
	}
	table += "</table>"; // 테이블 끝	
	document.getElementById("movies").innerHTML = table;	
}
</script>
</body></html>