5/31 TIL

5/31 메모

• find() --> 해당 조건에 만족하는 첫 번째 요소의 값을 반환 (객체가 담긴 배열에서도 사용가능)
• findIndex() --> 해당 조건에 만족하는 첫 번째 요소의 인덱스를 반환 (객체가 담긴 배열에서도 사용가능)
• filter() --> 만족하는 요소를 모은 새로운 배열을 반환

---

5/31 오류

문제

'fa' 를 입력하면 연속되지 않아도 포함되면 반환함

async function serch() {
    var value // 입력 받을 변수
    let html = '';
    value = document.getElementById("serch").value; //DOM에 접근해서 입력 받음
    let { results: movies } = await getMovies();
    const serchData = movies.filter((x) => {
        return x.title.includes(value)
    }) // value를 포함하는 title을 filter하여 serchData에 객체저장

    serchData.forEach((x) => {
        let htmlSegment = `<div class="col">
        <div class="card h-100">
            <imgtoken interpolation">${x.id})" src="https://image.tmdb.org/t/p/w500${x.poster_path}"
                class="card-img-top">
            <div class="card-body">
                <h5 class="card-title">${x.title}</h5>
                <p class="card-text">${x.overview}</p>
                <p class="average">평점 : ${x.vote_average}</p>
            </div>
        </div>
    </div>`;
        html += htmlSegment;
    });

    let container = document.querySelector('#cards-box');
    container.innerHTML = html;
}

시도

해결

회고

• 검색창에서 받아와 > 변수에 저장해 -> filter를 이용해서 이름이 포함된 것을 반환해 -> 그걸 출력해 식으로 나름의 순서를 나눠놓으니 조금 더 나았다.
• css 조작하기가 쉽지가 않다.