[Javascript] 배열 내 객체 정렬하기 (sort 콜백 함수)

 

리스트를 드래그 해서 인덱스 순서를 바꿔주는 작업을 하고 있는데

드래그 해서 내려 놓으면 배열 내의 특정 값들을 바꿔주는 작업은 완료했다. 

여기에서 자동으로 인덱스를 sorting 해주기 위해서 useEffect에 객체의 key 값으로 오름차순 sorting을 해주려고 한다.

 

 

내가 만든 배열 내 객체는 다음과 같다.

 

[
    {
      "goal_id": 0,
      "next_goal_id": 1,
      "title": "첫 번째 목표",
      "privacy": "PUB",
      "box_color": "",
      "title_color": "#3CB371"
    },
    {
      "goal_id": 1,
      "next_goal_id": 2,
      "title": "두 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#234d22"
    },
    {
      "goal_id": 2,
      "next_goal_id": 3,
      "title": "세 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#C71585"
    },
    {
      "goal_id": 3,
      "next_goal_id": 4,
      "title": "네 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#21bdbd"
    }
  ]

 

 

sort() 를 그냥 써버리면 참 좋겠지만 배열 내 객체 안에 정렬해주는 함수를 만들어야 한다.

 

const goal =  [
    {
      "goal_id": 0,
      "next_goal_id": 1,
      "title": "첫 번째 목표",
      "privacy": "PUB",
      "box_color": "",
      "title_color": "#3CB371"
    },
    {
      "goal_id": 1,
      "next_goal_id": 2,
      "title": "두 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#234d22"
    },
    {
      "goal_id": 2,
      "next_goal_id": 3,
      "title": "세 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#C71585"
    },
    {
      "goal_id": 3,
      "next_goal_id": 4,
      "title": "네 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#21bdbd"
    }
  ]
  
  goal.sort((a, b)=>{
  	return a.goal_id < b.goal_id ? -1 : a.goal_id > b.goal_id ? 1 : 0;
  })

 

 

 

728x90