ajax 중첩 사용

JSP에서 ajax 중첩 사용

 

$(document).ready(function(){
            let result = $(".row"); //bootstrap 추가
            let str="";
            let contentids = []; //contentid만 담을 배열 선언
            new Promise((succ, fail)=>{ //첫번째 ajax 실행
                $.ajax({ //지역기반 관광정보 조회 -> 모든 코스정보 불러오기
                    url: "첫번째 api주소",
                    success: function(data) {
                        console.log('items',data.response.body.items);
                        let items = data.response.body.items.item;
                        for(var i=0; i<items.length; i++){
                            contentids[i] = items[i].contentid;
                            //console.log(contentids[i]);
                        }
                        succ(data);
                    }
                });
            }).then((arg) =>{ //두번째 ajax 실행
                for(var i=0; i<contentids.length; i++){
                    (function(i){
                        let str="";
                        $.ajax({ //공통정보 조회 -> 특정 코스의 세부정보 불러오기
                            url: "두번째 api주소"+contentids[i],
                            //async:false,
                            success: function(data){
                                let detailInfos = data.response.body.items.item[0];
                                str = `
                                    <div class="card mb-3" style="max-width: 900px;">
                                      <div class="row row-cols-2">
                                        <div class="col col-left">
                                        <a href="course_detail.jsp?contentid=\${detailInfos.contentid}&title=\${detailInfos.title}"><img src="\${detailInfos.firstimage}" class="img-fluid rounded-start" alt="..." onerror="this.src='../images/nocourseimg.png'"></a>
                                        </div>
                                        <div class="col col-right">
                                          <div>
                                          <a href="course_detail.jsp?contentid=\${detailInfos.contentid}&title=\${detailInfos.title}" class="item-title"><h5 class="card-title">\${detailInfos.title}</h5></a>
                                            <p class="overview-text">\${detailInfos.overview}</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                `;
                                
                                result.append(str);
                                $('body').append(data);
                            }
                        });
                    })(i);
                }//for문 끝
                
            });
        });