WEB JAVA SPRING/JS

JSON, JavaScript ๊ฐ์ฒด ์ฐจ์ด

sshhhh 2023. 10. 5.

๐Ÿ“Œtype์ด object์ธ ์ด์œ ??

 

  • jsp์˜ success: function(data) ์—ฌ๊ธฐ๋กœ ๋„˜์–ด๊ฐ
  • console.log(data) ๊ฒฐ๊ณผ

 

๐Ÿšฉajax์—์„œ dataType: "JSON"์„ ์„ค์ •ํ–ˆ์„ ๋•Œ, ์„œ๋ฒ„์—์„œ ์‘๋‹ตํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ JSON ํ˜•์‹์œผ๋กœ ์ „๋‹ฌ๋˜๋ฉด,
JavaScript์—์„œ๋Š” ์ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์„œ ์ž๋™์œผ๋กœ JavaScript ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•จ

 

์˜ˆ๋ฅผ ๋“ค์–ด, ์„œ๋ฒ„์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ JSON ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋ƒˆ๋‹ค๊ณ  ๊ฐ€์ •

{
  "name": "John",
  "age": 30
}

์ด ๋ฐ์ดํ„ฐ๋Š” JavaScript ๊ฐ์ฒด์ฒ˜๋Ÿผ ๋‹ค๋ฃจ์–ด์ง ์ฆ‰, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉ

console.log(data.name); // "John"
console.log(data.age);  // 30

typeof data๊ฐ€ "object"๋กœ ํ‘œ์‹œ๋˜๋Š” ์ด์œ ๋Š” JavaScript์—์„œ JSON ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ์ฒด๋กœ ๋‹ค๋ฃจ๊ธฐ ๋•Œ๋ฌธ

 

 

๐Ÿšฉ{gridDataList: Array(33)}์™€ ๊ฐ™์€ ๊ตฌ์กฐ๋Š” JavaScript ๊ฐ์ฒด์˜ ํ‚ค-๊ฐ’ ์Œ(Key-Value Pair) ํ˜•ํƒœ๋กœ,์ผ๋ฐ˜์ ์ธ JSON ๊ฐ์ฒด

 

์—ฌ๊ธฐ์„œ:

  • "gridDataList"์€ ๊ฐ์ฒด์˜ Key (—> resultMap.put("gridDataList", JSPํŒŒ์ผ); return resultMap; ์ปจํŠธ๋กค๋Ÿฌ์—์„œ ๋ฆฌํ„ดํ•จ)
  • Array(33)์€ ๊ฐ์ฒด์˜ Value

์ฆ‰, "gridDataList" Key์—๋Š” ๊ธธ์ด๊ฐ€ 33์ธ ๋ฐฐ์—ด์ด ์ €์žฅ๋˜์–ด ์žˆ๋‹ค.

 

 

๐Ÿšฉ๋ฐฐ์—ด ๋‚ด๋ถ€์˜ ๊ตฌ์กฐ ์—ญ์‹œ JSON ๊ฐ์ฒด๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฐฐ์—ด์˜ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ์ธ 0์— ํ•ด๋‹นํ•˜๋Š” ๊ฐ’์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ JSON ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค:

{
  "GOO": "Q",
  "CU": "DP",
  "USE_YN": "Y",
  "GR_CD": "17",
  "TYPE": "Y",
}

์ด JSON ๊ฐ์ฒด๋Š” ํ‚ค์™€ ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ์†์„ฑ๋“ค์˜ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ๊ฐ€ ์ด๋Ÿฌํ•œ JSON ๊ฐ์ฒด๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๊ณ ,

๋ฐฐ์—ด์˜ ๊ธธ์ด๋Š” 33์ด๋ฏ€๋กœ, ์ด๋Ÿฌํ•œ ๊ฐ์ฒด๊ฐ€ ์ด 33๊ฐœ ์ €์žฅ๋˜์–ด ์žˆ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

์ด๋Ÿฌํ•œ JSON ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋‹ค๋ฃจ๊ธฐ ์šฉ์ดํ•˜๋ฉฐ,

์ผ๋ฐ˜์ ์œผ๋กœ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ฑฐ๋‚˜ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

 

 


 

JSON ํ˜•์‹์œผ๋กœ ํŒŒ์‹ฑํ•˜๋Š” ๊ฒƒ๊ณผ JavaScript ํ˜•์‹์œผ๋กœ ํŒŒ์‹ฑํ•˜๋Š” ๊ฒƒ ์‚ฌ์ด์˜ ์ฃผ์š” ์ฐจ์ด

JSON ํŒŒ์‹ฑ:

erpMenuTree.parse({
  "id": "1",
  "text": "Root",
  "children": [
    {
      "id": "2",
      "text": "Child 1",
      "children": [
        {
          "id": "3",
          "text": "Grandchild 1"
        },
        {
          "id": "4",
          "text": "Grandchild 2"
        }
      ]
    },
    {
      "id": "5",
      "text": "Child 2"
    }
  ]
}, 'json');

JavaScript ํ˜•์‹ ํŒŒ์‹ฑ:

var treeData = [
  {
    id: "1",
    text: "Root",
    item: [
      {
        id: "2",
        text: "Child 1",
        item: [
          {
            id: "3",
            text: "Grandchild 1"
          },
          {
            id: "4",
            text: "Grandchild 2"
          }
        ]
      },
      {
        id: "5",
        text: "Child 2"
      }
    ]
  }
];

erpMenuTree.parse(treeData, 'json');

์ฃผ์š” ์ฐจ์ด์ ์€ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ์‹

 

  1. JSON ํ˜•์‹:
    • children ์†์„ฑ์ด ์‚ฌ์šฉ
    • ํ•˜์œ„ ํ•ญ๋ชฉ์€ children ๋ฐฐ์—ด ๋‚ด์— ํฌํ•จ
    • id์™€ text ๊ฐ™์€ ํ‚ค-๊ฐ’ ์Œ์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ํ‘œํ˜„
  2. JavaScript ํ˜•์‹:
    • item ์†์„ฑ์ด ์‚ฌ์šฉ
    • ํ•˜์œ„ ํ•ญ๋ชฉ์€ item ๋ฐฐ์—ด ๋‚ด์— ํฌํ•จ
    • id์™€ text ๊ฐ™์€ ํ‚ค-๊ฐ’ ์Œ์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ํ‘œํ˜„

 

 


 

 

— json์€ ํ˜•์‹์ด ๋ฌธ์ž์—ด์ด๊ณ  js๋Š” ๊ฐ์ฒด์ธ๊ฐ€?

JSON(JavaScript Object Notation)์€ ๋ฌธ์ž์—ด ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ ํ‘œ๊ธฐ๋ฒ•์ด๋ฉฐ, JavaScript ๊ฐ์ฒด๋Š” ์‹ค์ œ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.

  • JSON: JSON์€ ๋ฐ์ดํ„ฐ ๊ตํ™˜ ํ˜•์‹์œผ๋กœ ์ฃผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. JSON ๋ฐ์ดํ„ฐ๋Š” ๋ฌธ์ž์—ด๋กœ ํ‘œํ˜„๋˜๋ฉฐ, ํ‚ค-๊ฐ’ ์Œ์œผ๋กœ ๊ตฌ์„ฑ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, {"name": "John", "age": 30}๊ณผ ๊ฐ™์€ ํ˜•ํƒœ์˜ ๋ฌธ์ž์—ด์ž…๋‹ˆ๋‹ค.
    JSON ๋ฐ์ดํ„ฐ๋ฅผ JavaScript ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•˜๋ ค๋ฉด JSON.parse()๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • JavaScript ๊ฐ์ฒด: JavaScript์—์„œ ๊ฐ์ฒด๋Š” ์‹ค์ œ ๊ฐ์ฒด๋กœ ์กด์žฌํ•˜๋ฉฐ, ๋‹ค์–‘ํ•œ ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    JavaScript ๊ฐ์ฒด๋Š” ์ค‘๊ด„ํ˜ธ {}๋กœ ์ •์˜๋˜๋ฉฐ, ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 
var person = {
  name: "John",
  age: 30,
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

๋‘ ํ˜•์‹์€ ์„œ๋กœ ๋‹ค๋ฅธ ๋ชฉ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

JSON์€ ๋ฐ์ดํ„ฐ ๊ตํ™˜์„ ์œ„ํ•œ ๊ฒฝ๋Ÿ‰ ๋ฐ์ดํ„ฐ ํ˜•์‹์ด๋ฉฐ, JavaScript ๊ฐ์ฒด๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ์ž์ฒด์˜ ๊ฐ์ฒด๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

JSON ๋ฐ์ดํ„ฐ๋ฅผ JavaScript ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•˜๊ฑฐ๋‚˜ JavaScript ๊ฐ์ฒด๋ฅผ JSON ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ,

์ด๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๊ฑฐ๋‚˜ ๊ตํ™˜ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

๋Œ“๊ธ€