[JS] JSON

곤·2022년 10월 18일
JavaScript
1

JavaScript

목록 보기
17/25

22.10.12.

JSON (JavaScript Object Notation)

자바스크립트에서 객체를 표현하는 형식으로 데이터를 표현한 것 (텍스트로 표현된 정보의 덩어리)
가볍고 자바스크립트와 호환성이 높다

{
  "squadName": "슈퍼히어로",
  "members": [
    {
      "name": "캡틴마블",
      "age": 00,
      "본명": "브리라슨"
    },
    {
      "name": "블랙위도우",
      "age": 00,
      "본명": "스칼렛 요한슨"
    }
  ]
}

JSON 메서드

  • JSON.parse(): JSON문자열을 자바스크립트 객체로 변환
  • JSON.stringify() : 자바스크립트 객체를 JSON문자열로 변환

JSON 응용

남은 방 계산하기

const 호텔 = [{
  '이름' : '하나호텔',
  '위치' : '제주도 제주시 001',
  '가격' : {'A':50000, 'B':30000, 'C':15000},
  '방의개수' : 50,
  '예약자수' : 25,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
  '이름' : '둘호텔',
  '위치' : '제주도 제주시 002',
  '가격' : {'A':100000, 'B':60000, 'C':30000},
  '방의개수' : 100,
  '예약자수' : 30,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
  '이름' : '셋호텔',
  '위치' : '제주도 제주시 003',
  '가격' : {'A':80000, 'B':50000, 'C':30000},
  '방의개수' : 120,
  '예약자수' : 80,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
}];

console.log(호텔.filter(호텔 => (호텔.이름 =='셋호텔')));
console.log(호텔.map(호텔 => ({
  '이름' : 호텔.이름,
  '위치' : 호텔.위치,
  '가격' : 호텔.가격,
  '방의개수' : 호텔.방의개수,
  '예약자수' : 호텔.예약자수,
  //물론 이름을 붙이는 간단한 연산 뿐만 아니라, 나라별 시간 표기법을 별도로 표시해준다던지 좀 더 복잡한 연산도 가능
  '남은방의개수' : 호텔.방의개수 - 호텔.예약자수
})));

let a = [5, 4, 3, 2, 1];
console.log(a.sort((a, b) => (a - b))); // 오름차순
console.log(호텔.sort((a, b) => (a.방의개수 - b.방의개수)));

테이블 만들어서 회원 정보 로딩하기

//CSS
        <style>
            table,
            thead,
            tbody,
            tr,
            th,
            td {
                border: solid 1px black;
                border-collapse: collapse;
            }
        </style>
// html
        <button onclick="renderTable(userData)">회원정보 로딩</button>
        <table style="width: 100%" id="infoTable">
            <thead>
                <th onclick="sort('_id')" style="width: 15%">id</th>
                <th onclick="sort('index')" style="width: 15%">index</th>
                <th onclick="sort('guid')" style="width: 15%">guid</th>
                <th onclick="sort('age')" style="width: 15%">age</th>
                <th onclick="sort('name')" style="width: 15%">name</th>
                <th onclick="sort('gender')" style="width: 15%">gender</th>
            </thead>
            <tbody></tbody>
        </table>
        <script>
            let userData = [
                {
                    _id: "6346555b442cea576e37249c",
                    index: 0,
                    guid: "5b398a4f-86b4-411b-aabc-3adb96659fdd",
                    age: 37,
                    name: "Marshall Booker",
                    gender: "male",
                },
                {
                    _id: "6346555bf0204a1ee03b4151",
                    index: 1,
                    guid: "f8eaa1a3-91c6-42bf-ac43-a622dc6e5750",
                    age: 26,
                    name: "Millicent Berry",
                    gender: "female",
                },
                {
                    _id: "6346555b4aeca9e1506038b0",
                    index: 2,
                    guid: "e3b74bf7-7e6b-427e-93ab-a0b40b4a813c",
                    age: 30,
                    name: "House Williams",
                    gender: "male",
                },
                {
                    _id: "6346555b0a1e5fc2884ed06f",
                    index: 3,
                    guid: "407e62c9-172d-4e64-84a5-77dabfe36dbc",
                    age: 20,
                    name: "Hobbs Bartlett",
                    gender: "male",
                },
                {
                    _id: "6346555bbc08e6272c2e1ee2",
                    index: 4,
                    guid: "c237c8bc-dd6f-46eb-851e-16450c9493c7",
                    age: 39,
                    name: "Hancock Macdonald",
                    gender: "male",
                },
                {
                    _id: "6346555bf2fb2fc3c4673d9c",
                    index: 5,
                    guid: "a9144fc5-a490-4aee-9abe-b2c8ab6db6a1",
                    age: 27,
                    name: "Mercedes Lynch",
                    gender: "female",
                },
                {
                    _id: "6346555b9c9e72828bcd25de",
                    index: 6,
                    guid: "b4d4b22f-2421-4821-bcf2-31b5719667df",
                    age: 28,
                    name: "Dorthy Haney",
                    gender: "female",
                },
            ];

            var click = true;

            function sort(key) {
                if (click) {
                    click = false;
                    let sortedData = userData.sort((a, b) =>
                        a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : 0
                    );
                    renderTable(sortedData);
                } else {
                    click = true;
                    let sortedData = userData.sort((a, b) =>
                        a[key] > b[key] ? -1 : a[key] < b[key] ? 1 : 0
                    );
                    renderTable(sortedData);
                }
            }

            function renderTable(userData) {
                // console.log(userData[0]);
                let tableBodyData = [];

                for (const user of userData) {
                    tableBodyData.push(`
                        <tr>
                            <td>${user._id}</td>
                            <td>${user.index}</td>
                            <td>${user.guid}</td>
                            <td>${user.age}</td>
                            <td>${user.name}</td>
                            <td>${user.gender}</td>
                        </tr>
                    `);
                }

                console.log(tableBodyData.join(""));
                document.querySelector("#infoTable > tbody").innerHTML =
                    tableBodyData.join("");
            }
        </script>

productname, price 뽑아내기

<div id="main"></div>
<script>
// 20221012153547
// http://test.api.weniv.co.kr/mall
            let data = [
                {
                    id: 1,
                    productName:
                        "버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링",
                    price: 12500,
                    stockCount: 100,
                    thumbnailImg: "asset/img/1/thumbnailImg.jpg",
                    option: [],
                    discountRate: 0,
                    shippingFee: 1500,
                    detailInfoImage: [
                        "asset/detail/2/detail1.png",
                        "asset/detail/2/detail2.png",
                    ],
                    viewCount: 0,
                    pubDate: "2022-02-28",
                    modDate: "2022-02-28",
                },
                {
                    id: 2,
                    productName: "우당탕탕 라이캣의 실험실 스티커 팩",
                    price: 3500,
                    stockCount: 1000,
                    thumbnailImg: "asset/img/2/thumbnailImg.jpg",
                    option: [],
                    discountRate: 0,
                    shippingFee: 1500,
                    detailInfoImage: [
                        "asset/detail/2/detail1.png",
                        "asset/detail/2/detail2.png",
                    ],
                    viewCount: 0,
                    pubDate: "2022-02-28",
                    modDate: "2022-02-28",
                },
                {
                    id: 3,
                    productName: "딥러닝 개발자 무릎 담요",
                    price: 17500,
                    stockCount: 0,
                    thumbnailImg: "asset/img/3/thumbnailImg.jpg",
                    option: [],
                    discountRate: 0,
                    shippingFee: 1500,
                    detailInfoImage: [
                        "asset/detail/3/detail1.png",
                        "asset/detail/3/detail2.png",
                        "asset/detail/3/detail3.png",
                    ],
                    viewCount: 0,
                    pubDate: "2022-02-28",
                    modDate: "2022-02-28",
                },
                {
                    id: 4,
                    productName: "네 개발잡니다 개발자키링 금속키링",
                    price: 13500,
                    stockCount: 100,
                    thumbnailImg: "asset/img/4/thumbnailImg.jpg",
                    option: [],
                    discountRate: 0,
                    shippingFee: 1500,
                    detailInfoImage: [
                        "asset/detail/4/detail1.png",
                        "asset/detail/4/detail2.png",
                    ],
                    viewCount: 0,
                    pubDate: "2022-02-28",
                    modDate: "2022-02-28",
                },
                {
                    id: 5,
                    productName: "Hack Your Life 개발자 노트북 파우치",
                    price: 36000,
                    stockCount: 230,
                    thumbnailImg: "asset/img/5/thumbnailImg.jpg",
                    option: [
                        {
                            id: 1,
                            optionName: "13인치",
                            additionalFee: 0,
                        },
                        {
                            id: 2,
                            optionName: "15인치",
                            additionalFee: 1000,
                        },
                    ],
                    discountRate: 19,
                    shippingFee: 1500,
                    detailInfoImage: [
                        "asset/detail/5/detail1.png",
                        "asset/detail/5/detail2.png",
                    ],
                    viewCount: 0,
                    pubDate: "2022-02-28",
                    modDate: "2022-02-28",
                },
                {
                    id: 6,
                    productName: "[NEW] 위니브 개발자, 캐릭터 스티커팩 2종",
                    price: 5500,
                    stockCount: 1000,
                    thumbnailImg: "asset/img/6/thumbnailImg.jpg",
                    option: [
                        {
                            id: 1,
                            optionName: "위니브 개발자 스티커팩",
                            additionalFee: 0,
                        },
                        {
                            id: 2,
                            optionName: "위니브 프랜즈 스티커팩",
                            additionalFee: 0,
                        },
                        {
                            id: 3,
                            optionName: "스티커팩 세트(개발자+프렌즈)",
                            additionalFee: 5000,
                        },
                    ],
                    discountRate: 0,
                    shippingFee: 1500,
                    detailInfoImage: [
                        "asset/detail/6/detail1.png",
                        "asset/detail/6/detail2.png",
                        "asset/detail/6/detail3.png",
                        "asset/detail/6/detail4.png",
                        "asset/detail/6/detail5.png",
                    ],
                    viewCount: 0,
                    pubDate: "2022-02-28",
                    modDate: "2022-02-28",
                },
                {
                    id: 7,
                    productName: "제주코딩베이스캠프 코딩 연습장 세트",
                    price: 8000,
                    stockCount: 1000,
                    thumbnailImg: "asset/img/7/thumbnailImg.jpg",
                    option: [],
                    discountRate: 0,
                    shippingFee: 1500,
                    detailInfoImage: [
                        "asset/detail/7/detail1.png",
                        "asset/detail/7/detail2.png",
                    ],
                    viewCount: 0,
                    pubDate: "2022-02-28",
                    modDate: "2022-02-28",
                },
            ];

let main = document.getElementById("main");

// https://test.api.weniv.co.kr/asset/img/7/thumbnailImg.jpg
let mainBodyData = [];
for (const item of data) {
	mainBodyData.push(`
		<img src="${
		"https://test.api.weniv.co.kr/" + item.thumbnailImg
		}"/>
		<h2>${item.productName}</h2>
		<p>${item.price}</p>
	`);
}
// console.log(mainBodyData.join(""));
main.innerHTML = mainBodyData.join("");
</script>
profile
곤
주니어 프론트엔드 웹 개발자 🐛
이전 포스트

[JS] 프로토타입 Prototype

다음 포스트

[JS] DOM

0개의 댓글