개발자

자바스크립트 데이터 정렬

2024년 05월 13일조회 53

obj라는 객체를 아래와 같이 정렬시키려고 합니다 정렬 기준은 각각의 요소중 total을 기준으로 내림차순 정렬해야합니다 아무리해도 정렬하고 객체로 만드는 과정중에 정렬이 풀리는데 혹시 하는방법 아시는분 있나요..? -입력- const obj = { yearMonth: "2023-10", 호랑이: {cat: '호랑이', total: 2, ycnt: 2, ncnt: 0}, 사자: {cat: '사자', total: 56, ycnt: 46, ncnt: 10}, 말: {cat: '말', total: 54, ycnt: 39, ncnt: 15}, 고양이: {cat: '고양이', total: 7, ycnt: 6, ncnt: 1}, 악어: {cat: '악어', total: 17, ycnt: 12, ncnt: 5}, 사슴: {cat: '사슴', total: 41, ycnt: 37, ncnt: 4}, 곰: {cat: '곰', total: 89, ycnt: 77, ncnt: 12}, 기린: {cat: '기린', total: 10, ycnt: 8, ncnt: 2}, 치타: {cat: '치타', total: 9, ycnt: 6, ncnt: 3}, 코끼리: {cat: '코끼리', total: 22, ycnt: 18, ncnt: 4}, 강아지: {cat: '강아지', total: 48, ycnt: 42, ncnt: 6}, } -출력- { yearMonth: "2023-10" 곰: {cat: '곰', total: 89, ycnt: 77, ncnt: 12}, 사자: {cat: '사자', total: 56, ycnt: 46, ncnt: 10}, 말: {cat: '말', total: 54, ycnt: 39, ncnt: 15}, 강아지: {cat: '강아지', total: 48, ycnt: 42, ncnt: 6}, 사슴: {cat: '사슴', total: 41, ycnt: 37, ncnt: 4}, 코끼리: {cat: '코끼리', total: 22, ycnt: 18, ncnt: 4}, 악어: {cat: '악어', total: 17, ycnt: 12, ncnt: 5}, 기린: {cat: '기린', total: 10, ycnt: 8, ncnt: 2}, 치타: {cat: '치타', total: 9, ycnt: 6, ncnt: 3}, 고양이: {cat: '고양이', total: 7, ycnt: 6, ncnt: 1}, 호랑이: {cat: '호랑이', total: 2, ycnt: 2, ncnt: 0}, }

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

문정동개발자님의 프로필 사진

출력을 보면 total을 기준으로 내림차순으로 정렬이 잘 된것처럼 보이는데 문제가 뭘까요?

profile picture

익명

작성자

2024년 05월 13일

넵 출력은 정답 결과값을 제가 그냥 적은거고 입력을 받으면 출력(정답결과값)을 하는 코드를 작성하는게 목표입니다!

문정동개발자님의 프로필 사진

문정동개발자

프론트엔드2024년 05월 13일

function sortObjByTotal(obj){ // 기존 오브젝트에서 sorting할 부분만 배열로 변경 const arr = Object.keys(obj).reduce((res,curr)=>{ if(obj[curr]['cat'] != undefined && obj[curr]['total'] != undefined && obj[curr]['ycnt'] != undefined && obj[curr]['ncnt'] != undefined){ return [...res,obj[curr]] }else{ return res; } },[]) //sorting arr.sort((a,b)=>b['total'] - a['total']); //sorting된 배열을 다시 오브젝트로 변경 const res = { yearMonth:obj['yearMonth'] } arr.forEach(v=>res[v['cat']] = v) return res; } 더 좋은 방법이 많을 수 있습니다.

문정동개발자님의 프로필 사진

문정동개발자

프론트엔드2024년 05월 13일

gpt는 이렇게 알려주네요 좀더 깔끔한 것 같습니다 function sortObjectByTotal(obj) { // yearMonth을 제외한 나머지 속성들을 total 기준으로 정렬 const sortedEntries = Object.entries(obj) .filter(([key, value]) => key !== 'yearMonth') .sort((a, b) => b[1].total - a[1].total); // yearMonth을 유지하고, 정렬된 항목을 새 객체에 추가 const sortedObj = { yearMonth: obj.yearMonth }; sortedEntries.forEach(([key, value]) => { sortedObj[key] = value; }); return sortedObj; }

profile picture

익명

작성자

2024년 05월 13일

답변 너무 감사드립니다. 집가는 중인데 제가 해보고 다시 말씀드릴게요!

profile picture

익명

작성자

2024년 05월 13일

이것도 정렬 잘 되는 것 같네요 감사합니다!! ㅠㅠ

정 훈님의 프로필 사진

.

1const arr = Object.entries(obj).filter(([key, value]) => key !== 'yearMonth').sort((a, b) => b[1].total - a[1].total);
2
3const sortedObj = Object.fromEntries([['yearMonth', obj.yearMonth], ...arr]);
profile picture

익명

작성자

2024년 05월 13일

답변 너무 감사드립니다. 제가 해보고 결과 알려드릴게욤!

profile picture

익명

작성자

2024년 05월 13일

해봤는데 정렬 안 된 입력결과 그대로 나옵니다 ㅠㅠ

정 훈님의 프로필 사진

정 훈

FE2024년 05월 13일

제가 해봤을 때 정렬되던데 안되시나요 ?

profile picture

익명

작성자

2024년 05월 13일

const obj = { yearMonth: "2023-10", 호랑이: { cat: "호랑이", total: 2, ycnt: 2, ncnt: 0 }, 사자: { cat: "사자", total: 56, ycnt: 46, ncnt: 10 }, 말: { cat: "말", total: 54, ycnt: 39, ncnt: 15 }, 고양이: { cat: "고양이", total: 7, ycnt: 6, ncnt: 1 }, 악어: { cat: "악어", total: 17, ycnt: 12, ncnt: 5 }, 사슴: { cat: "사슴", total: 41, ycnt: 37, ncnt: 4 }, 곰: { cat: "곰", total: 89, ycnt: 77, ncnt: 12 }, 기린: { cat: "기린", total: 10, ycnt: 8, ncnt: 2 }, 치타: { cat: "치타", total: 9, ycnt: 6, ncnt: 3 }, 코끼리: { cat: "코끼리", total: 22, ycnt: 18, ncnt: 4 }, 강아지: { cat: "강아지", total: 48, ycnt: 42, ncnt: 6 }, }; const arr = Object.entries(obj) .filter(([key, value]) => key !== "yearMonth") .sort((a, b) => b[1].total - a[1].total); const sortedObj = Object.fromEntries([["yearMonth", obj.yearMonth], ...arr]); console.log("sortedObj", sortedObj); -------------------------------------------------------- 콘솔 결과 ↓↓↓↓↓ sortedObj {yearMonth: '2023-10', 곰: {…}, 사자: {…}, 말: {…}, 강아지: {…}, …} yearMonth: "2023-10" 강아지: {cat: '강아지', total: 48, ycnt: 42, ncnt: 6} 고양이: {cat: '고양이', total: 7, ycnt: 6, ncnt: 1} 곰: {cat: '곰', total: 89, ycnt: 77, ncnt: 12} 기린: {cat: '기린', total: 10, ycnt: 8, ncnt: 2} 말: {cat: '말', total: 54, ycnt: 39, ncnt: 15} 사슴: {cat: '사슴', total: 41, ycnt: 37, ncnt: 4} 사자: {cat: '사자', total: 56, ycnt: 46, ncnt: 10} 악어: {cat: '악어', total: 17, ycnt: 12, ncnt: 5} 치타: {cat: '치타', total: 9, ycnt: 6, ncnt: 3} 코끼리: {cat: '코끼리', total: 22, ycnt: 18, ncnt: 4} 호랑이: {cat: '호랑이', total: 2, ycnt: 2, ncnt: 0} 저는 크롬브라우저 기준으로 콘솔에 찍힌거보면 total이 내림차순으로 정렬 안되어있네요 ㅠㅠ

정 훈님의 프로필 사진

정 훈

FE2024년 05월 14일

브라우저 콘솔창에서는 펼쳤을 때 정렬이 안된 것 처럼 보이네요. {yearMonth: '2023-10', 곰: {…}, 사자: {…}, 말: {…}, 강아지: {…}, …} 이 부분을 보시면 정렬이 된건 맞는 것 같습니다. vscode 에서도 정렬된 값으로 나와요

profile picture

익명

작성자

2024년 05월 14일

오?? 축약부분이랑 펼쳤을때랑 다르네요? 오호 감사합니다 다시해볼게욤

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 05월 13일

자바스크립트에서 객체는 프로퍼티의 키에 따라 정렬되는 것이 아니라, 입력한 순서를 유지합니다. 그렇기 때문에 기존의 obj를 배열로 변환하고 total 값에 따라 정렬한 후 다시 객체로 변환해주어야 합니다. 먼저 `yearMonth` 값을 저장하고 삭제한 후, 배열로 변경하고 내림차순 정렬을 한 후에 다시 객체로 변환하는 코드입니다: ```javascript const yearMonth = obj.yearMonth; // yearMonth 값을 저장 delete obj.yearMonth; // obj에서 yearMonth 프로퍼티 삭제 let arr = Object.keys(obj).map((key) => obj[key]); // 객체를 배열로 변환 arr.sort((a, b) => b.total - a.total); // total값 기준으로 내림차순 정렬 let sortedObj = {yearMonth}; // yearMonth 포함된 새 객체 생성 arr.forEach(item => { sortedObj[item.cat] = item; // 새 객체에 요소 추가 }); ``` 이제 `sortedObj`는 제대로 정렬된 상태입니다. 이 접근 방식은 자바스크립트에서 객체가 본래 가지고 있는 특성을 우회하기 때문에 실제 실행 환경에서 사용할 때 주의가 필요합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!