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