211203 개발기록: 자바스크립트 객체 조건별 정렬, 카테고리 정렬, 이중 정렬

[ 문제 ]

아래와 같은 데이터 객체가 있다. status  프로퍼티에는 "대기", "진행중", "완료" 3가지 값이 들어올 수 있고, 요구사항은 배열 내부의 객체를 "대기 - 진행중 - 완료" 순으로 정렬하는 것이다.

const patients = [
    {
        "id": 1,
        "name": "김더존",
        "reg_time": "14:30",
        "doc_name": "김시연",
        "status": "완료",
    },
    {
        "id": 2,
        "name": "박더존",
        "reg_time": "12:30",
        "doc_name": "최진수",
        "status": "대기",
    },
    {
        "id": 3,
        "name": "대더존",
        "reg_time": "11:30",
        "doc_name": "이상욱",
        "status": "진행중",
    },
  ...,
      {
        "id": 10,
        "name": "최더존",
        "reg_time": "11:30",
        "doc_name": "임성후",
        "status": "진행중",
    },
]

 

현재 데이터를 렌더링하면 아래처럼 나온다. 뒤죽박죽이다. 정 렬 하러 가보자고

 

 

 

 

[해결과정]

sort()메소드를 사용하는 방법도 있지만, 코드가 직관적이지 않았다. (사실 sort() 메소드로 해결못했다, 해결도 못하고 직관적이지도 않고)

우선 정렬하고 싶은 순서대로(대기 -> 진행중 -> 완료)  order 배열을 만들었다.

 

const order = ["대기", "진행중", "완료"]

 

order 의 원소를 순서대로 iterate 하면서, 우리가 정렬하고자 하는 patients 배열에 filter 메소드를 적용했다.

 

const patientOrder = order.map(base => 
                          patients.filter(data => data.status === base));

 

이런식으로 세개의 서로 다른 객체가 patientOrder 배열에 담겼다.

0번째 인덱스부터 2번째 인덱스까지, 우리가 원하는 순서인 대기 -> 진행중 -> 완료 순서대로 배열이 잘 저장돼있다.

하나의 배열에 서로 다른 세개의 배열이 담겨있다. 하지만 우리가 원하는 형태는 그저 하나의 배열에 객체가 담겨있는 형태이다. (그래야 렌더링이 되니까)

해결법은 간단하다. flat() 메서드를 써주자. 

 

const patientOrder = order.map(base => 
                          patients.filter(data => data.status === base)).flat();

 

 

[ 결과 ]

깔~끔하게 정렬 되었다. 간단한 코드지만 기록하고 싶어서 포스탱했다.