[JS] 다시 렌더링 할때 forEach 문제

원래 페이지를 열었을 때는 아래 처럼 나왔는데

검색의 결과를 append() 를 이용해서 추가하면 아래처럼 나오게 된다.

몇가지 코드의 변형을 통해서 해결했다.

먼저 처음 코드는 아래와 같았다.

            function renderInfo(jDtos) {
                jDtos.forEach(jDto => {
                    let el = `
            			// 코드 생략 
                            <div class="d-flex justify-content-between">
                                <div>
                                        <c:forEach items="`+ jDto.skillList +`" var="skill">
                                            <span class="badge  skill-color">${skill}</span>
                                        </c:forEach>
                                </div>
                                <div>
                                    D-`+ jDto.leftTime + `
                                </div>
							</div>
            			`;
                    $('.info-card').append(el);
                });
            }

el 안에 jstl 을 넣으니 제대로 동작하지 않는것 같다.
따라서 해당 forEach 를 따로 그려주기로 했다.

위 코드의 el을 아래처럼 바꾼 뒤에 함수를 추가했다.

            function renderInfo(jDtos) {
                jDtos.forEach(jDto => {
                    let el = `
                            <div class="d-flex justify-content-between">
                                <div id="scrap-`+jDto.jobsId+`-render">
                                        <div id="scrap-`+jDto.jobsId+`-remove">
                                
                                        </div>
                                </div>
                                <div>
                                    D-`+ jDto.leftTime + `
                                </div>
                            </div>
            			`;
                    $('.info-card').append(el);
                    insertSkill(jDto.skillList, jDto.jobsId);
                    insertScrap(jDto.jobsId, jDto.userScrapId, userId)
                });
            }

추가된 함수는 아래와 같다.

            function insertSkill(skillList, jobsId) {
                for (let index = 0; index < 2; index++) {
                    let el = `
                    <span class="badge skill-color">`+ skillList[index] + `</span>
                `;
                    $('#insert-skill-' + jobsId).append(el);
                }
            }

            function insertScrap(jobsId, ScrapId){
                let el ;
                if ( userId > 0){
                    if ( ScrapId > 0){
                        el = `
                        <i id="scrap-`+ jobsId + `" class="fa-solid on-Clicked fa-star my-cursor"
                    token template-punctuation string">`+ jobsId + `,` + userId + `,` + ScrapId + `)"></i>
                        `;
                    }else{
                        el = `
                 <i id="scrap-`+ jobsId + `" class="fa-regular fa-star my-cursor"
                    token template-punctuation string">`+ jobsId + `,` + userId + `,)"></i>
                `;
                    }
                }else{
                    el = `
                    <a href="/user/login">
                        <i id="scrap-`+jobsId+`" class="fa-regular fa-star"></i>
                    </a>
                    `;
                }
                $('#scrap-'+jobsId+'-remove').append(el);
            }

해당 그림을 그린뒤에 필요한 데이터를 추가적으로 넣어줌으로써 원하는 결과를 얻을 수 있었다.