[JS] 7. json

최재원

Apr 01, 2025

Contents

JavaScript Object Java Object json 변환

프로그램들 끼리 통신을 할 때 사용하는 중간 언어

자바스크립트 오브젝트의 키값에 쌍따옴표를 추가한 모양이 json

JavaScript Object


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>json</h1>
        <hr />
        <script>
            let user = {
                id: 1,
                username: "ssar",
                password: "1234",
                hobby: ["축구", "농구"],
                address: {
                    con: "한국",
                    city: "부산",
                    code: 56789,
                },
            };
            console.log(user);
        </script>
    </body>
</html>

Java Object


package shop.mtcoding.blog;

import lombok.AllArgsConstructor;
import lombok.Data;

import java.util.ArrayList;
import java.util.List;

@AllArgsConstructor
@Data
public class User {
    private int id;
    private String username;
    private String password;
    private List<String> hobby = new ArrayList<String>();
    private Address address;
    
    @AllArgsConstructor
    @Data
    class Address {
        private String con;
        private String city;
        private int code;
    }
}

json 변환


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>json</h1>
        <hr />
        <button onclick="m1()">자바스크립트오브젝트를JSON으로</button>
        <button onclick="m2()">JSON을자바스크립트오브젝트로</button>
        <script>
            function m1() {
                let data = JSON.stringify(user); // -> json
                console.log(data);
            }

            function m2() {
                let temp = `
                {
                "id":1,
                "username":"ssar",
                "password":"1234",
                "hobby":["축구","농구"],
                "address":{
                            "con":"한국",
                            "city":"부산",
                            "code":56666
                            }
                }`;
                let data = JSON.parse(temp); // -> javascript object
                console.log(data);
            }

            let user = {
                id: 1,
                username: "ssar",
                password: "1234",
                hobby: ["축구", "농구"],
                address: {
                    con: "한국",
                    city: "부산",
                    code: 56789,
                },
            };
        </script>
    </body>
</html>

json

javascript object

See more posts

[JS] 7. json

JavaScript Object

Java Object

json 변환

More articles

[프로그래머스] (MySQL) 32. 잡은 물고기의 평균 길이 구하기

[JS] 8. 비동기 통신

[JS] 6. DOM 조작

[JS] 5. 이벤트