| sitelink1 | https://www.omnibuscode.com/board/index...._srl=60497 |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
JavaScript에서 JSON 데이터를 정렬하려면 JSON 문자열을 JavaScript 객체로 변환한 다음, 객체의 배열을 원하는 기준에 따라 정렬하고 다시 JSON 문자열로 변환하면 됩니다.
다음은 이를 수행하는 예제입니다.
### 예제 1: 간단한 JSON 배열 정렬
#### JSON 데이터
```json
[
{"name": "John", "age": 30},
{"name": "Anna", "age": 25},
{"name": "Mike", "age": 20}
]
```
#### 정렬 코드
```javascript
// JSON 문자열
const jsonString = '[{"name":"John", "age":30}, {"name":"Anna", "age":25}, {"name":"Mike", "age":20}]';
// JSON 문자열을 JavaScript 객체로 변환
const jsonArray = JSON.parse(jsonString);
// 객체 배열을 나이(age)를 기준으로 정렬
jsonArray.sort((a, b) => a.age - b.age);
// 정렬된 객체 배열을 JSON 문자열로 변환
const sortedJsonString = JSON.stringify(jsonArray, null, 2);
console.log("Sorted JSON: ", sortedJsonString);
```
### 예제 2: 중첩된 JSON 배열 정렬
때로는 중첩된 JSON 배열을 정렬해야 할 수도 있습니다.
예를 들어, JSON 데이터가 다음과 같이 중첩되어 있다고 가정해 봅시다:
#### JSON 데이터
```json
{
"group": [
{"name": "John", "age": 30},
{"name": "Anna", "age": 25},
{"name": "Mike", "age": 20}
]
}
```
#### 정렬 코드
```javascript
// JSON 문자열
const jsonString = '{"group":[{"name":"John", "age":30}, {"name":"Anna", "age":25}, {"name":"Mike", "age":20}]}';
// JSON 문자열을 JavaScript 객체로 변환
const jsonObject = JSON.parse(jsonString);
// 객체의 배열을 나이(age)를 기준으로 정렬
jsonObject.group.sort((a, b) => a.age - b.age);
// 정렬된 객체를 JSON 문자열로 변환
const sortedJsonString = JSON.stringify(jsonObject, null, 2);
console.log("Sorted JSON: ", sortedJsonString);
```
### 예제 3: 다중 키 기준 정렬
하나 이상의 키를 기준으로 JSON 배열을 정렬해야 할 때도 있습니다.
예를 들어, 나이와 이름을 기준으로 정렬하려면 다음과 같이 할 수 있습니다.
#### JSON 데이터
```json
[
{"name": "John", "age": 25},
{"name": "Anna", "age": 25},
{"name": "Mike", "age": 30}
]
```
#### 정렬 코드
```javascript
// JSON 문자열
const jsonString = '[{"name":"John", "age":25}, {"name":"Anna", "age":25}, {"name":"Mike", "age":30}]';
// JSON 문자열을 JavaScript 객체로 변환
const jsonArray = JSON.parse(jsonString);
// 객체 배열을 나이(age)와 이름(name)을 기준으로 정렬
jsonArray.sort((a, b) => {
if (a.age === b.age) {
return a.name.localeCompare(b.name);
}
return a.age - b.age;
});
// 정렬된 객체 배열을 JSON 문자열로 변환
const sortedJsonString = JSON.stringify(jsonArray, null, 2);
console.log("Sorted JSON: ", sortedJsonString);
```
### 요약
- JSON 문자열을 `JSON.parse`로 JavaScript 객체로 변환합니다.
- 객체 배열을 `Array.prototype.sort`를 사용하여 정렬합니다.
- 정렬된 객체 배열을 `JSON.stringify`를 사용하여 JSON 문자열로 변환합니다.
이러한 방법을 통해 JSON 데이터를 다양한 기준으로 정렬할 수 있습니다.
필요에 따라 정렬 기준을 변경하거나 다중 키 정렬을 적용할 수 있습니다.
[JSON 데이터가 배열 형태가 아니라 객체 형태인 경우]
JSON 데이터가 배열 형태가 아니라 객체 형태인 경우에도 그 안의 키-값 쌍을 알파벳 순서 또는 다른 기준에 따라 정렬할 수 있습니다.
다만, JSON 객체의 키 순서는 JavaScript 표준에 의해 정의된 것이 아니며, 대부분의 환경에서 키의 순서는 보장되지 않습니다.
그래도 객체를 키 기준으로 정렬된 JSON 문자열로 변환하는 방법을 보여드리겠습니다.
### 예제: 객체의 키를 알파벳 순서로 정렬
#### JSON 데이터
```json
{
"name": "John",
"age": 30,
"city": "New York"
}
```
#### 정렬 코드
```javascript
// JSON 문자열
const jsonString = '{"name":"John", "age":30, "city":"New York"}';
// JSON 문자열을 JavaScript 객체로 변환
const jsonObject = JSON.parse(jsonString);
// 객체의 키를 알파벳 순서로 정렬
const sortedJsonObject = {};
Object.keys(jsonObject).sort().forEach(key => {
sortedJsonObject[key] = jsonObject[key];
});
// 정렬된 객체를 JSON 문자열로 변환
const sortedJsonString = JSON.stringify(sortedJsonObject, null, 2);
console.log("Sorted JSON: ", sortedJsonString);
```
### 설명
1. **JSON 문자열**: 정렬할 JSON 데이터를 문자열로 준비합니다.
2. **JavaScript 객체로 변환**: `JSON.parse`를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다.
3. **객체의 키 정렬**:
- `Object.keys`를 사용하여 객체의 키 배열을 얻습니다.
- `Array.prototype.sort`를 사용하여 키 배열을 정렬합니다.
- 정렬된 키 배열을 반복하면서 새로운 객체(`sortedJsonObject`)에 키-값 쌍을 추가합니다.
4. **JSON 문자열로 변환**: `JSON.stringify`를 사용하여 정렬된 객체를 JSON 문자열로 변환합니다.
### 다중 수준 객체의 키 정렬
중첩된 객체의 키도 정렬하려면 재귀적으로 정렬하는 방법을 사용해야 합니다.
#### 예제: 중첩된 객체의 키를 정렬
```javascript
// JSON 문자열
const jsonString = '{"name":"John", "age":30, "address":{"city":"New York", "zipcode":"10001"}}';
// JSON 문자열을 JavaScript 객체로 변환
const jsonObject = JSON.parse(jsonString);
// 객체의 키를 재귀적으로 알파벳 순서로 정렬하는 함수
function sortObjectKeys(obj) {
if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
return obj;
}
const sortedObj = {};
Object.keys(obj).sort().forEach(key => {
sortedObj[key] = sortObjectKeys(obj[key]);
});
return sortedObj;
}
// 객체의 키를 정렬
const sortedJsonObject = sortObjectKeys(jsonObject);
// 정렬된 객체를 JSON 문자열로 변환
const sortedJsonString = JSON.stringify(sortedJsonObject, null, 2);
console.log("Sorted JSON: ", sortedJsonString);
```
### 설명
1. **재귀 함수** `sortObjectKeys`:
- 객체가 아닌 경우(기본형 데이터 또는 배열)는 그대로 반환합니다.
- 객체인 경우 키를 정렬하고, 각 키에 대해 재귀적으로 `sortObjectKeys`를 호출하여 값도 정렬합니다.
2. **객체의 키 정렬**:
- 최상위 객체에 대해 `sortObjectKeys`를 호출하여 전체 객체의 키를 정렬합니다.
이 방법으로 JSON 객체 내의 모든 키를 재귀적으로 정렬할 수 있습니다.
[객체의 키-값 쌍을 값 기준으로 정렬]
JSON 데이터가 배열 형태가 아니고 객체 형태인 경우, 객체의 키-값 쌍을 값 기준으로 정렬하는 방법을 알아보겠습니다.
이는 객체를 배열로 변환한 후 정렬하고, 다시 객체로 변환하는 과정이 필요합니다.
### 예제: 값 기준으로 객체 정렬
#### JSON 데이터
```json
{
"name": "John",
"age": 30,
"city": "New York"
}
```
#### 정렬 코드
```javascript
// JSON 문자열
const jsonString = '{"name":"John", "age":30, "city":"New York"}';
// JSON 문자열을 JavaScript 객체로 변환
const jsonObject = JSON.parse(jsonString);
// 객체의 키-값 쌍을 배열로 변환
const entries = Object.entries(jsonObject);
// 값 기준으로 정렬 (여기서는 문자열 비교를 위해 모두 문자열로 변환)
entries.sort((a, b) => {
if (a[1] < b[1]) return -1;
if (a[1] > b[1]) return 1;
return 0;
});
// 정렬된 키-값 쌍을 다시 객체로 변환
const sortedJsonObject = entries.reduce((acc, [key, value]) => {
acc[key] = value;
return acc;
}, {});
// 정렬된 객체를 JSON 문자열로 변환
const sortedJsonString = JSON.stringify(sortedJsonObject, null, 2);
console.log("Sorted JSON: ", sortedJsonString);
```
### 설명
1. **JSON 문자열**: 정렬할 JSON 데이터를 문자열로 준비합니다.
2. **JavaScript 객체로 변환**: `JSON.parse`를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다.
3. **키-값 쌍을 배열로 변환**: `Object.entries`를 사용하여 객체의 키-값 쌍을 배열로 변환합니다.
4. **값 기준으로 정렬**: `Array.prototype.sort`를 사용하여 값 기준으로 키-값 쌍 배열을 정렬합니다.
5. **배열을 다시 객체로 변환**: `Array.prototype.reduce`를 사용하여 정렬된 키-값 쌍 배열을 객체로 변환합니다.
6. **JSON 문자열로 변환**: `JSON.stringify`를 사용하여 정렬된 객체를 JSON 문자열로 변환합니다.
### 숫자 값 기준 정렬 예제
값이 모두 숫자인 경우:
#### JSON 데이터
```json
{
"b": 3,
"a": 1,
"c": 2
}
```
#### 정렬 코드
```javascript
// JSON 문자열
const jsonString = '{"b":3, "a":1, "c":2}';
// JSON 문자열을 JavaScript 객체로 변환
const jsonObject = JSON.parse(jsonString);
// 객체의 키-값 쌍을 배열로 변환
const entries = Object.entries(jsonObject);
// 값 기준으로 정렬 (숫자 비교)
entries.sort((a, b) => a[1] - b[1]);
// 정렬된 키-값 쌍을 다시 객체로 변환
const sortedJsonObject = entries.reduce((acc, [key, value]) => {
acc[key] = value;
return acc;
}, {});
// 정렬된 객체를 JSON 문자열로 변환
const sortedJsonString = JSON.stringify(sortedJsonObject, null, 2);
console.log("Sorted JSON: ", sortedJsonString);
```
이 방법을 사용하면 JSON 객체 내의 키-값 쌍을 값 기준으로 정렬할 수 있습니다.
값이 문자열인 경우와 숫자인 경우를 구분하여 정렬 방식을 적용할 수 있습니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| » | [ChatGPT] json data 의 정렬 [1] | 황제낙엽 | 2024.07.23 | 216 |
| 10 | [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 | 황제낙엽 | 2024.06.02 | 218 |
| 9 | json 데이터 내의 변수명에 prefix 로 type 표현하기 | 황제낙엽 | 2024.04.15 | 219 |
| 8 | (Bard) JavaScript로 JSON 배열을 작성하는 방법 | 황제낙엽 | 2023.08.21 | 238 |
| 7 | JSON 클래스가 지원하는 function | 황제낙엽 | 2023.03.31 | 227 |
| 6 | (Copilot) JSON 객체의 내부 데이터 리스트 길이를 구하는 방법 | 황제낙엽 | 2023.03.30 | 252 |
| 5 | Json 특징 및 문법 | 황제낙엽 | 2021.01.26 | 276 |
| 4 | ECMA 스크립트의 JSON | 황제낙엽 | 2019.10.16 | 346 |
| 3 | JSON.parse() - feat. Object.assign | 황제낙엽 | 2017.07.09 | 366 |
| 2 | 링크모음 | 황제낙엽 | 2011.03.25 | 584 |
| 1 | 개요 | 황제낙엽 | 2009.03.11 | 343 |
[sample 1]
{
"no1": {"insert_date": 1625074800},
"no2": {"insert_date": 1625074802},
"no3": {"insert_date": 1625074801}
}
설명
JSON.parse를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다.Object.entries를 사용하여 객체의 키-값 쌍을 배열로 변환합니다.insert_date값을 기준으로 정렬:Array.prototype.sort를 사용하여insert_date값을 기준으로 배열을 정렬합니다.Array.prototype.reduce를 사용하여 정렬된 키-값 쌍 배열을 객체로 변환합니다.JSON.stringify를 사용하여 정렬된 객체를 JSON 문자열로 변환합니다.이 예제에서는
insert_date값을 기준으로 JSON 객체를 정렬하였습니다. 출력된 정렬된 JSON 문자열은 다음과 같습니다:{
"no1": {
"insert_date": 1625074800
},
"no3": {
"insert_date": 1625074801
},
"no2": {
"insert_date": 1625074802
}
}