JSON
JSON은 JavaScript 객체 문법을 따르는 문자 기반의 데이터 포맷으로, JSON 표현식은 사람과 기계 모두 이해하기 쉽고 용량이 작아서 데이터를 전송 등에서 많이 사용된다. JSON의 기본적인 형태는 {key : value}이고, key값이나 value는 항상 쌍따옴표(텍스트 형식)를 이용하여 표기한다. JSON형식에는 null, number, string, array, object, boolean 을 사용할 수 있다. function, date, undefined의 경우 JSON에서 사용이 불가능 하다.
- {"데이터이름": "값"}
JSON 값 변환
- JSON.stringfy(value, replacer, space)
- value : javascript의 값이나 객체를 JSON문자열로 변환
- replacer : [optional] JSON문자열에 포함시킬 객체의 속성들을 선택하는 옵션
- space : [optional] 가독성을 위해 JSON 문자열의 공백을 조정하는 옵션, 잘 사용하지 않음 - JSON.parse(text, reviver)
- text : JSON문자열을 일반 객체나 일반 배열로 변환
- reviver : [optional] JSON을 반환하기 전에 값을 변환 (function(key, value){} 사용하여 변환)
JSON 예제
JSON.stringfy(value, replacer, space)
<!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>
<script>
// JSON.stringfy(value)
const obj1 = { name: "코딩쥐", food: "햄버거", url: "https://coding-ji.tistory.com" }
const obj1_json = JSON.stringify(obj1);
console.log(obj1_json);
// JSON.stringfy(value, replacer)
const obj2 = { name: "코딩쥐", food: "햄버거", url: "https://coding-ji.tistory.com", number: 10 }
const obj2_json = JSON.stringify(obj2, function(key, value) {
if (key === "url") {
return undefined; // "url" 속성 키 제외
}
return value; // 나머지 속성은 그대로 반환
});
console.log(obj2_json);
// JSON.stringfy(value, replacer, space)
const obj3 = { name: "코딩쥐", food: "햄버거", url: "https://coding-ji.tistory.com", number: 10 }
const obj3_json = JSON.stringify(obj3, null, "\t") // \t : 수평탭
console.log(obj3_json);
</script>
</body>
</html>
JSON.parse(text, reviver)
<!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>
<script>
const json = `{"name": "코딩쥐", "food": "햄버거", "url": "https://coding-ji.tistory.com"}`
//JSON.parse(text)
const obj1 = JSON.parse(json);
console.log(obj1);
//JSON.parse(text, reviver) - "food" 키값을 가진 객체에, ", 치킨" 문자열 연산자로 추가
const obj2 = JSON.parse(json, function (key, value) {
return key === "food" ? value + ", 치킨" : value;
});
console.log(obj2);
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : 웹 스토리지 (3) - IndexedDB의 keyRange / index / opencusor (0) | 2024.08.18 |
|---|---|
| JavaScript : 웹 스토리지 (2) - IndexedDB란? (0) | 2024.08.18 |
| JavaScript : 웹 스토리지 (1) - Cookie와 Web Storage (0) | 2024.08.17 |
| JavaScript: location 객체란? (0) | 2024.08.15 |
| JavaScript: Screen 객체 (0) | 2024.08.15 |
| JavaScript : 모듈(module)에 대해서 (0) | 2024.08.14 |
| JavaScript : 비동기 통신에 대해서 (Fetch & Axios) (0) | 2024.08.14 |
| JavaScript : 비동기를 처리하는 방법 (Async / Await) (0) | 2024.08.13 |