Level 3 : 5~8 (ajax, json, array, sort)

5. 카드레이아웃에 데이터를 불러와 카드 3개 생성하기

<div class="container">
    <div class="row">
    </div>
</div>

원시자바스크립트버전

let cardWrap = document.querySelector('.row');
let products = [
    { id : 0, price : 70000, title : 'Blossom Dress' },
    { id : 1, price : 50000, title : 'Springfield Shirt' },
    { id : 2, price : 60000, title : 'Black Monastery' }
];

products.forEach(function(a, i){
    let card = `<div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100">
          <h5>${products[i]['title']}</h5>
          <p>${products[i]['price']}</p>
        </div>`
    cardWrap.insertAdjacentHTML('beforeend', card);
});

 

알게 된 점

.append()의 경우 jquery 언어이기 때문에, cardWrap을 querySelector 형태로 선언하니 코드가 아닌 문자열로 뜨는 오류가 발생했다. append를 쓸 때 소스 함수는 jquery 형태로 쓰여져야 하는 것을 알았다.
반면, .appendChild()는 원시 자바스크립트이다. .append()처럼 안에 요소를 그냥 집어넣을 수 없고, creadteElement로 요소를 만든 후 넣어줘야 한다.

---

6. 더보기 버튼을 누르면 ajax로 데이터 불러오기

조건

더보기를 누를 때마다 새로운 상품을 가져오고 3번째 클릭 시 버튼이 사라져야 한다.

let count = 0;
let cardWrap = document.querySelector('.row');
let button = document.querySelector('.btn-danger');

button.addEventListener('click', function(){
    count++;
    let insertData = function(data){
        data.forEach((a, i) => {
            let card =
            `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${a.title}</h5>
            <p>${a.price}</p>
            </div>`
            cardWrap.insertAdjacentHTML('beforeend', card);
        });
    }
    if (count == 1){
        fetch('https://codingapple1.github.io/js/more1.json')
        .then(res => res.json())
        .then(data => {
            insertData(data);
        })
        .catch(error => {
            console.log(`요청 실패!`);
        })
    } else if (count == 2){
        fetch('https://codingapple1.github.io/js/more2.json')
        .then(res => res.json())
        .then(data => {
            insertData(data);
        })
        .catch(error => {
            console.log(`요청 실패!`);
        })
    } else if (count == 3){
        button.style.display = 'none';
    }
});

---

7. 알파벳순으로 정렬하기

const arr = ['cherry', 'date', 'apple', 'banana'];
arr.sort(function(a, b) {
  if (a < b) {
    return -1;
  } else if (a > b) {
    return 1;
  } else {
    return 0;
  }
});
console.log(arr)

이는 js에서 문자열이 부등호로 비교가 가능한 것을 활용한 코드이다. 이롤 통해 문자열을 알파벳으로 정렬할 수 있다.

아래는 역순 정렬이다.

arr.sort(function(a, b) {
  if (a < b) {
    return 1;
  } else if (a > b) {
    return -1;
  } else {
    return 0;
  }
});

---

8. 가격순으로 정렬하기

조건

가격순 정렬 버튼을 누르면 리스트 안의 상품을 모두 삭제 후 가격순 정렬된 상품으로 뿌려준다.

let products = [
    { id : 0, price : 70000, title : 'Blossom Dress' },
    { id : 1, price : 50000, title : 'Springfield Shirt' },
    { id : 2, price : 60000, title : 'Black Monastery' }
]; 
let cardWrap = document.querySelector('.row');
let buttonMore = document.querySelector('.btn-more');
let buttonSort = document.querySelector('.btn-sort');

buttonMore.addEventListener('click', function(){
    products.forEach(function(a, i){
        let card = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${products[i]['title']}</h5>
            <p>${products[i]['price']}</p>
            </div>`
        cardWrap.insertAdjacentHTML('beforeend', card);
    });
});
buttonSort.addEventListener('click', function(){
    cardWrap.innerHTML = '';
    products.sort(function(a, b) {
        let priceA = a.price;
        let priceB = b.price;
        if (priceA < priceB){
            return -1;
        } else if (priceA > priceB){
            return 1;
        } else {
            return 0;
        }
        // return a.price - b.price 해도 됨;
    });
    products.forEach(function(a, i){
        let card = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${products[i]['title']}</h5>
            <p>${products[i]['price']}</p>
            </div>`
        cardWrap.insertAdjacentHTML('beforeend', card);
    });
});

---

출처 : 코딩애플 https://codingapple.com/