IT로 먹구살자
15
2019-11-05 17:46:17 작성 2019-11-05 18:04:30 수정됨
4
201

[자바 스크립트 입문] 초보 질문 입니다~!


안녕하세요, OKKY에서 계속 눈팅만 하다가 이렇게 질문을 올려보는 건 처음입니다. 잘 부탁 드리겠습니다.

자바스크립트 관련 학원 강의를 계속 듣고 있습니다. 현재 직무는 IT 기술지원 엔지니어 인데요, 코딩과 관련하여 더 알고 싶어서 자비로 회사 끝나면 무거운 몸 이끌고 가서 계속 배우고 있습니다 ㅠ_ㅠ

질문은 아래 내용과 같습니다.

=> 오름차순 / 내림차순을 HTML 화면 레이아웃 버튼에서 클릭할 때마다 변경을 하고 싶은 데, Sort의 기본 예제는 이해가 가지만 응용을 잘 못하겠습니다. 아무리 짱구를 굴려봐도 도저히 답이 안나오네요... IT 선배님들의 힌트와 조언을 구해보고 싶습니다.


1. 데이터 / 예제

[{"id":1,"title":"심판","writer":"프란츠 카프카","publisher":"문예출판사","price":8100,"description":"인간의 원죄 의식과 존재 상실의 슬픔을 상징적으로 표현한 프란츠 카프카 대표작. 인간 존재의 근원적 모습을 파해친 작품으로, 평균적인 근대 시민의 실체를 자각케 했다는 평가를 받았다."},

{"id":2,"title":"마의 산","writer":"토마스 만","publisher":"열린책들","price":10620,"description":"토마스 만의 소설 『마의 산』 상권. 저자가 폐렴 증세로 다보스의 한 요양원에서 요양 중이던 아내를 방문해 3주를 보낸 실제 체험을 바탕으로 쓰여진 작품"},

{"id":3,"title":"안네의 일기","writer":"안네 프랑크","publisher":"문예출판사","price":8100,"description":"절망 속에서도 꺼지지 않는 희망의 불빛! 안네 프랑크 탄생 80주년 기념판『안네의 일기』. 안네 프랑크가 태어난 지 80년을 맞아 새롭게 펴낸 책이다."}


2. html / 설정

<div class="container">
<h2>추천 도서 목록</h2>
<button id="btn-sort" class="btn btn-primary">정렬</button>
<div id="books">
</div>
</div>

3. 자바스크립트 코드

const container = document.querySelector("#books");
const btnSort = document.querySelector("#btn-sort");
let books = [];
let asc = [];

const promise = fetch('/api/books');
const updateUI = () => {
let bookList = books.map(data => {
return `
<tr>
<td>${data.title}</td>
<td>${data.writer}</td>
<td>${data.publisher}</td>
<td>${data.price}</td>
</tr>
`;
})

container.innerHTML = `
<table border=1 width=100%>
<thead>
<tr>
<td>Title</td>
<td>Author</td>
<td>Publisher</td>
<td>Price</td>
</tr>
</thead>
<tbody>
${bookList.join('')}
</tbody>
</table>
`;
}

const uiHandler = response => {
books = response;
updateUI();

//asc = response;
//updateUI();
};

const onSort = () => {
alert("내림차순");
books = books.sort((a,b) => {if(a.price > b.price) return -1;})
updateUI();
//alert("오름차순");
//asc.push(books);
//asc = asc.sort((a,b) => {if(a.price < b.price) return -1;})
//asc = asc.sort(function (a,b) {
if(a.price < b.price) return -1;
})
}


btnSort.addEventListener('click', onSort);


promise
.then(response => response.json()
.then(uiHandler))
.catch(err => console.log(err));

0
0
  • 답변 4

  • hhj
    227
    2019-11-05 18:06:28

    어떤부분을 도와드려야 될지 모르겠지만

    오름차순, 내림차순의 전환만 간단하게 생각한다면 변수를 하나 선언하면 되지 않을까요?

    var 내림차순 = false에서 정렬버튼을 클릭시 내림차순변수를 true로 바꾸고 내림차순 정렬,

    그 다음 정렬버튼 클릭시 내림차순변수를 false로 바꾸고 오름차순정렬

    간단하게 이런식이면 충분할것같네요.


    0
  • error-404
    1k
    2019-11-05 18:39:06

    본업도 아니신데 열심히 하시는 부분 정말로 존경스럽습니다.


    말씀주신 소스에서 최대한 수정하지않은 형태로 수정을 해보면



    let sortFlag = true;



    const onSort = () => {
        books = books.sort((a, b) =>{ 
            if(sortFlag ? a.price > b.price : a.price < b.price) return -1;
        });
        sortFlag = !sortFlag;
        updateUI();
    }



    위와같이 사용하면서 toggle 하시면 될거같습니다. 

    0
  • IT로 먹구살자
    15
    2019-11-05 18:40:19

    답변 정말 감사드립니다. 하지만, 저도 참 아쉬운 게 말로는 이해가 가지만 그걸 코드로 구현하는 걸 어떻게 할 지가 참 막막합니다. 코드를 보시면 가장 상단에 let asc = []; 라는 배열을 가질 수 있는 변수를 생성했는데 그렇게 생성한 걸 아래 onSort라는 상수 안에서 어떻게 처리를 할지가 참 막막합니다.

    예를 들어, 생성한 테이블의 Price 단을 비교하였다면 하기와 같은 코드를 쓰면 내림차순으로 한번 정렬이 됩니다. 그럼 그 내림차순으로 정렬된 배열을 클릭 한번으로 다시 오름차순으로 변경하고 싶은 데, 많이 부족한 탓인지 활용이 안됩니다. 혹시 이 부분에서는 제가 어떤 식으로 접근해야 될까요?

    const onSort = () => {

    alert("내림차순");
    books = books.sort(function (a,b) {
    if (a.price > b.price) return -1;
    else if(a.price < b.price) return 1;
    else return 0;
    })
    updateUI();
    }
    0
  • IT로 먹구살자
    15
    2019-11-05 18:41:44

    댓글로 답변을 방금 달았는데 error-404 님께서 좋은 말씀을 이미 주셨네요 ㅠ_ㅠ

    정말 감사드립니다. 해당 내용으로 다시 공부 해보도록 하겠습니다.

    너무 감사드리며, 다시 한번 열심히 정진하겠습니다!

    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.