JavaScript 13. JSON
JSON
- JavaScriptObjectNotation
- 데이터를 저장하고 교환하기 위한 문법
- 텍스트-기반의 데이터 교환 방식
- 브라우저와 서버간 데이터 교환은 텍스트만 가능
- JSON은 자바 스크립트 언어에서 유래
- 모든 자바 스크립트 객체를 JSON으로 변환 가능
- JSON을 자바 스크립트 객체로 변환 가능
- 공식적인 인터넷 미디어 타입은 application/json이며 파일 이름 확장자는 .json
JOSN 형식
- JavaScript : key값에는 따옴표 X
{name:"홍길동", addr:"대전", tel:"010-1234-5678"}
- JSON object : key값에도 따옴표
{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"}
- 배열
- ["홍길동","개나리", "진달래","이도령"]
- JSON object 배열
- [{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"},
{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"},
{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"}]
JSON으로 표현된 객체
문자, 숫자, 객체(JSON Object), 배열, Booleans, null
{
"name" : "오혁"
,"phone" : "010-1234-5678"
,"age" : 25
,"address" : { "nation" : "Korea"
,"city" : "Seoul"
,"postalCode" : "12345"}
,"특기" : ["검술", "무술"]
,"양반" : false
,"아들" : null
}
JSON 메소드
- JSON.stringify(myObj) : 문자열로 변환(서버로 전송 시)
var myObj = {name : "John", age:31, city:"New York"};
var myJSON = JSON.stringify(myObj);
=> "{name : "John", age:31, city:"New York"}"
- JSON.parse(string, function) : JavaScript객체로 변환
var myStr= '{name : "John", age:31, city:"New York"}';
var myJSON = JSON.parse(myStr);
=>{name:"John", age:31, city:"New York"}
예제1
- JSON.stringify(myObj) : 문자열로 변환 (서버로 전송 시)!
- JSON.parse(string, function) : JavaScript 객체로 변환!
- 브라우저와 서버간 데이터 교환은 텍스트만 가능
- JavaScript : key값에는 따옴표 X
{name:"홍길동", addr:"대전", tel:"010-1234-5678"}
- JSON object : key값에도 따옴표
{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"}
- 배열
- ["홍길동","개나리", "진달래","이도령"]
- JSON object 배열
- [{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"},
{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"},
{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"}]
- [{"name":"홍길동", "addr":"대전", "tel":"010-1234-5678"},
JSON으로 표현된 객체
문자, 숫자, 객체(JSON Object), 배열, Booleans, null
{
"name" : "오혁"
,"phone" : "010-1234-5678"
,"age" : 25
,"address" : { "nation" : "Korea"
,"city" : "Seoul"
,"postalCode" : "12345"}
,"특기" : ["검술", "무술"]
,"양반" : false
,"아들" : null
}
JSON 메소드
- JSON.stringify(myObj) : 문자열로 변환(서버로 전송 시)
var myObj = {name : "John", age:31, city:"New York"};
var myJSON = JSON.stringify(myObj);
=> "{name : "John", age:31, city:"New York"}"
- JSON.parse(string, function) : JavaScript객체로 변환
var myStr= '{name : "John", age:31, city:"New York"}';
var myJSON = JSON.parse(myStr);
=>{name:"John", age:31, city:"New York"}
예제1
- JSON.stringify(myObj) : 문자열로 변환 (서버로 전송 시)!
- JSON.parse(string, function) : JavaScript 객체로 변환!
{
"name" : "오혁"
,"phone" : "010-1234-5678"
,"age" : 25
,"address" : { "nation" : "Korea"
,"city" : "Seoul"
,"postalCode" : "12345"}
,"특기" : ["검술", "무술"]
,"양반" : false
,"아들" : null
}- JSON.stringify(myObj) : 문자열로 변환(서버로 전송 시)
var myObj = {name : "John", age:31, city:"New York"};
var myJSON = JSON.stringify(myObj);
=> "{name : "John", age:31, city:"New York"}" - JSON.parse(string, function) : JavaScript객체로 변환
var myStr= '{name : "John", age:31, city:"New York"}';
var myJSON = JSON.parse(myStr);
=>{name:"John", age:31, city:"New York"}
예제1
- JSON.stringify(myObj) : 문자열로 변환 (서버로 전송 시)!
- JSON.parse(string, function) : JavaScript 객체로 변환!
html
<body>
<button type="button" id="btnJson" onclick="proc();">JSON 변환 테스트</button>
<br><br>
<div>
<br>
1차변환(obj>str): <span id="spJsonStr"></span>
<br>
2차변환(str>obj): <span id="spJsonObj"></span>
<p>이름 : <span id ="spName"></span></p>
<p>나이 : <span id ="spAge"></span></p>
<p>생년월일 : <span id ="spBirth"></span></p>
<p>주소 : <span id ="spAddr"></span></p>
<p>취미 : <span id ="spHobby"></span></p>
</div>
</body>JS
var obj = {
name : "오혁"
,age : 20
,birth : "1993-10-05"
,addr : { city : "서울"
, gu : "마포구"
, dong: "합정동"
, zipcode : "12345"
}
,hobby : ["기타", "노래", "작사", "작곡"]
}; JS <button type="button" onclick="proc();">JSON 변환 테스트</button> 방법
function proc(){
//객체를 JSON 스트링으로 변환
var str = JSON.stringify(obj);
$("#spJsonStr").html(str);
//문자열을 자바스크립트 객체로 변환
var obj1 = JSON.parse(str);
$("#spJsonObj").text(obj1);
$("#spName").text(obj1.name);
$("#spAge").text(obj1.age);
$("#spBirth").text(obj1.birth);
//$("#spBirth").text(new Date(obj1.birth));
$("#spAddr").text(obj1.addr.city
+" "+obj1.addr.gu
+" "+obj1.addr.dong
+" "+obj1.addr.zipcode
);
var hobby = "";
//취미 방법1. 마지막 ","빼기
for(var i=0; i<obj1.hobby.length; i++){
if(i == obj1.hobby.length-1){ // 배열중 마지막이면
hobby += obj1.hobby[i];
}else{ //아니면 쉼표를 붙여라
hobby += obj1.hobby[i] + ", ";
}
}
//취미방법2. 마지막 ","빼기
for(x in obj1.hobby){
hobby += obj1.hobby[x] + ", ";
console.log("취미 : "+hobby);
}
hobby = hobby.substr(0, hobby.length-2);
$("#spHobby").text(hobby);
} JS <button type="button" id="btnJson>JSON 변환 테스트</button> 방법
$(function(){
$("#btnJson").click(function(){
//객체를 JSON 스트링으로 변환
var str = JSON.stringify(obj);
$("#spJsonStr").html(str);
//JSON 스트링을 객체로 변환
var obj1 = JSON.parse(str);
$("#spJsonObj").text(obj1);
$("#spName").text(obj1.name);
$("#spAge").text(obj1.age);
console.log(obj1.age);
$("#spBirth").text(obj1.birth);
console.log(obj1.birth);
$("#spAddr").text(obj1.addr);
$("#spHobby").text(obj1.hobby);
});
});
결과
Author And Source
이 문제에 관하여(JavaScript 13. JSON), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zhyun1220/JavaScript-13.-JSON저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
