Frontend/JavaScript
19. JSON (JSON 기본구조, XML, JSON 관련함수)
개발개발빈이
2022. 6. 19. 11:11
○ JSON
- JavaScript Object Notation
- 비동기식 통신(문자단위 통신)에서 XML을 대체하는 포맷이다
- AJAX, NoSQL DB 등에서 주로 사용되는 포맷(표기법)
- 배열을 객체화
○ JSON 기본구조
- 속성:값 쌍으로 데이터가 구성되어 있다
- 속성(name, property, key), 값(value)
- name구성시 " '기호는 생략가능하다
- {}안에 데이터를 저장한다
- 형식) {name:value, "name":value, 'name':value, ~~~}
{driver:"OracleDriver", "username":"system", 'password':1234}
○ XML 문법
- 여는 태그와 닫는 태그로 구성 (반드시 둘 다 있음)
- custom tag(사용자가 임의로 만든 태그) 기반
- 환경 설정 파일 작성, 안드로이드 기반 앱 개발시 View단 구성
<database>
<driver>OracleDriver</driver>
<username>system</username>
<password>1234</password>
</database>
○ 배열, JavaScript, JSON 비교
- 배열(Array)
var person=[];
person["firstName"]="John";
person["lastName"]="Doe";
person["age"]=46;
document.write(person["firstName"]); //John
document.write(person["lastName"]); //Doe
document.write(person["age"]); //46
- JavaScript, JSON
//변수선언(JSON)
var person={"firstName":"John", "lastName":"Doe", "age":46};
//JavaScript 접근
document.write(person["firstName"]);
document.write(person["lastName"]);
document.write(person["age"]);
//JSON 접근
document.write(person.firstName);
document.write(person.lastName);
document.write(person.age);
○ JSON 관련 함수
① JSON.parse()
- String형태의 JSON문법을 분리할 때
var person='{"firstName":"John", "lastName":"Doe", "age":46}';
document.write(person.length); //48
document.write(person); //{"firstName":"John", "lastName":"Doe", "age":46} (문자열)
var obj = JSON.parse(person); //JSON문법으로 변환, parsing
document.write(obj.firstName); //John
document.write(obj.lastName); //Doe
document.write(obj.age); //46
② JSON.stringify()
- JSON값을 일반 문자열로 변환
var txt={"firstName":"John", "lastName":"Doe", "age":46};
var str=JSON.stringify(txt);
document.write(str.length); //46
document.write(str); //{"firstName":"John","lastName":"Doe","age":46} (문자열)
○ JSON Array
- JSON 문법 안에 배열이 다시 올 수 있음
var myObj={
name:"John"
,age:30
,cars:["Ford", "BMW", "Fiat"]
}
var x=myObj.cars[0];
document.write(x); //Ford