JSON [ChatGPT] json data 의 정렬

황제낙엽 2024.07.23 06:09 조회 수 : 204

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 객체 내의 키-값 쌍을 값 기준으로 정렬할 수 있습니다.

값이 문자열인 경우와 숫자인 경우를 구분하여 정렬 방식을 적용할 수 있습니다.

 

번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 205
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 310
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 341
» [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 204
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 231
241 fetch() 사용 예제들 황제낙엽 2024.07.09 263
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 275
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 219
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 213
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 394
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 211
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 436
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 670
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 469
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 287
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 235
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 318
229 navigator.mediaDevices 황제낙엽 2023.08.21 294
228 Barcode Detection API 황제낙엽 2023.08.06 513
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 199