(실전) 웹개발 기능대회 예제 검색기능

[김지향]

안녕하세요 선생님
json파일로 상품목록가져오는거는 다했는데 검색기능은 도무지 뭐가 잘못된건지 잘 모르겠어요...
오늘 아침부터 검색기능(검색하면 그 상품만보이기) 해보려고 몇시간동안 고민을 해봤지만 작동이 안됩니다ㅠㅠ
뭐가 잘못되었을까요
검색어를 넣고 콘솔에 확인해보면 검색어값도 잘 뜨고 data.products안에 자료도 잘뜨는거 확인했습니다.
필터부터 작동에 문제가 있는거 같은데 어떻게 해야할지 모르겠어요..


             $('#searchWord').on('input',function(){
            let 검색어 = $('#searchWord').val();
            let 필터값 = $.get('필요한파일/store.json').done(function(data){
                data.products.filter(function(a){
                    return a.title.includes(검색어) || a.brand.includes(검색어)
                });
            })
        
            $('.artBox').html('');
            필터값.forEach(function(a,i){
                var 상품목록 = 
                `<article>
                    <div class="img"><img src="필요한파일/${a.photo}" alt=""></div>
                    <div class="texts">
                        <h3>${a.title}</h3>
                        <h4>${a.brand}</h4>
                        <p>${a.price}</p>
                        <button class="ctn2Btn">담기</button>
                        </div>
                        </article>`
                        
                $('.artBox').append(상품목록);
            })

[김지향]

json파일로가져온 자료 값만 변수에 저장하고 싶을때
return data.products 이런식으로 사용해도 가져올 수 있을까요..? 콘솔창에는 출력이 안되는걸로 봐서는 안되는거 같은데
어떻게 해야 자료값을 변수에 담을 수 있을까요?

$('#searchWord').on('input',function(){
            let 검색어 = $('#searchWord').val();
            var 데이터 = $.get('필요한파일/store.json').done(function(data){
                return data.products
            })
                       
 

[김지향]

그리고 함수바깥에 변수를 만들어 두면 함수들끼리 변수공유가 가능하다고 하셨는데
저는 여기서 products변수를 만들어서 변수공유해서 get으로 파일을 또 불러오지 않고
 사용하고 싶었는데 그렇게 하면 자료들이 안불러와지네요... 어떻게 해야 변수공유가 가능할까요?

스크립트 앞에 상품목록 추가하는 부분입니다. let products 만들고 json에서 가져온자료 data.products를 재할당했는데요
아래에 콘솔로 출력해보면 []이거만 나오고 재할당은 저기 get안에서만 되네요ㅠ
변수를 처음에 선언하고 함수안에서 재할당하면 변수공유가 가능하다는말을 제가 잘못 이해한걸까요...? 
        let products = []; 
        $.get("필요한파일/store.json").done(function(data){
            products = data.products;
            data.products.forEach(function(a,i){
                var 상품목록 = 
                `<article class="item" draggable="true" data-id="${a.id}">
                    <div class="img"><img src="필요한파일/${a.photo}" alt=""></div>
                    <div class="texts">
                        <h3>${a.title}</h3>
                        <h4>${a.brand}</h4>
                        <p>${a.price}</p>
                        <button class="ctn2Btn add">담기</button>
                        </div>
                        </article>`
                        
                $('.artBox').append(상품목록);
            })
        })
        console.log(products)

[codingapple]

ajax 요청하는 코드는 다른코드보다 늦게 처리됩니다 
자바스크립트는 늦게처리되는 함수들은 제껴두고 바로 다음줄 코드를 실행해서 그렇습니다 
전부 ajax then 함수안에서 처리하면 됩니다

[글쓴이]

글