- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
JavaScript [삽잡이::javascript] JSON Array를 만들어보자
2018.05.25 11:06
[삽잡이::javascript] JSON Array를 만들어보자
Json이란
JavaScript Object Notation 의 줄임말입니다.
(출처_ w3schools)
이런식으로 생겨먹었습니다.
사람이 읽기쉽고, Parsing하기도 쉽게 이루어져있는 형식입니다.
이름(name)과 값(value) 둘이 붙어서
쌍으로 다니는 형태로 이루어져있지요.
JSON 형식은 데이터를 전송시 용이하게 사용됩니다.
기본적으로 중괄호({ }) 사이에 값과 쌍이
이러한 형태로 구성되어있습니다.
이렇게 Json 형식으로 데이터를 구성하기 위해서는
대개 아래와 같은 형식으로 코드를 작성하곤 합니다.
Object 형식의 aJson 이라는 녀석을 만들고,
name과 그에 맞는 value를 채워넣어줍니다.
|
1
2
3
4
5
6
7
8
|
var aJson = new Object();
aJson.korName = "삽잡이";
aJson.engName = "shovelMan";
aJson.sex = "남";
aJson.bloodType = "B";
JSON.stringify(aJson);
|
cs |
그리고 보셔야 할 것이
JSON.stringify() 메서드입니다.
해당 메서드는 인자로 들어와 있는 데이터를
문자열로 변환시켜주는 역할을 하고 있습니다.
이와 반대되게 JSON.parse() 메서드를 통해서는
인자로 들어온 문자열을 데이터로 변환시켜주는 역할을 합니다.
아무튼....
방금 예제 코드는 위에서 보여드린 JSON 형식을 생각해보시고
어떻게 출력될지 예상해보시길 바랍니다.
절대 귀찮은게 아니에요~ 
이러한 Json Object들이 모여서
Json Array를 만들게 되는데~
만들게 되는데~ ?!
대괄호([ ]) 사이에 Json Object들이 들어가게됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var aJsonArray = new Array();
var aJson = new Object();
aJson.korName = "삽잡이";
aJson.engName = "shovelMan";
aJson.sex = "남";
aJson.bloodType = "B";
aJsonArray.push(aJson);
aJson.kroName = "삽돌이";
aJson.engName = "sapMan";
aJson.sex = "여";
aJson.bloodType ="A";
aJsonArray.push(aJson);
var sJson = JSON.stringify(aJson);
|
cs |
aJsonArray라는 배열에다가
json Object를 차곡차곡 push 해줍니다.
그리고 String 형태인 sJson에 담아 화면에 뿌려줄 수 있겠지요.
재미있는 것은 value로 오는 값이
반드시 단일 데이터일 필요는 없다는 것입니다.
예 그렇습니다.
배열도 올 수 있다 이겁니다.
|
1
2
3
4
5
6
|
var aJson = new Object();
aJson.name = "삽잡이";
aJson.profile = {engName : "shovelMan", sex : "남", bloodType : "B"};
var sJson = JSON.stringify(aJson);
|
cs |
뭐.. 이런식도 되겠구요,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var aTotalJson = new Array();
var aSapArray = new Array();
var aJson = new Object();
aJson.korName = "삽잡이";
aJson.engName = "shovelMan";
aSapArray.push(aJson);
var aZapArray = new Array();
aJson = new Object();
aJson.korName = "김모군";
aJson.engName = "Kim";
aZapArray.push(aJson);
aTotalJson.sap = aSapArray;
aTotalJson.zap = aZapArray;
|
cs |
이렇게 배열을 가지고 놀 수도 있겠지요
사실 최근에 Json Array가 들어간 배열을 가지고 놀아야되서...
좀 더 이것저것 가지고 놀아봐야겠습니다.
오늘 보여드린건 완전 기초!!
아무튼!
굳~
출처: http://shovelman.tistory.com/794 [한글로는 삽잡이, 영어로는 shovelMan]
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
