Today I Learned 2023.02.07.

문제발생

accordion 이라는 bootstrap의 component를 써야했다.
끌어오는거 자체는 어렵지 않게 했는데,
문제는 ajax로 데이터를 받아온 후, accordion form에 붙이면 붙일수록, 해당 섹션이 '아닌' 섹션들이 펼쳐지는 현상이 발견되었다.

시도해본 것들

① id 값과 여러 주소 값들이 temp_html을 붙일 때 마다 겹쳐서 발생한다는 점을 알았고, 내 임의로 값을 바꿔보았었다.

success: function (response) {
                    let dash = response['dashboards']
                    for (let i = 0; i < dash.length; i++) {

이 for 문에 있는 i 값은 매 루프마다 다르기 때문에, 이 i값으로 id 와 주소를 변경해서 temp_html을 붙여보자!
했지만, 계속 jquery 오류가 나면서 syntac error가 발생했다.

해결

let index = String(i)
let temp_html = `<div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo${index}">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseTwo${index}" aria-expanded="false" aria-controls="collapseTwo${index}">
                            ${type} ${sets} ${reps}
                        </button>
                    </h2>
                    <div id="collapseTwo${index}" class="accordion-collapse collapse" aria-labelledby="headingTwo${index}"
                         data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            ${comments}
                        </div>
                    </div>
                </div>`

사실 시도해 본 것과 별 다른 점은 없지만, 가장 중요한 차이점은, 기존의 값들을 살려서 가느냐의 문제였던 것 같다.
기존의 값들은 각각의 기능이 있었다고 한다. 이에 index 값을 문자열 i로 받아서 넣어주면, 각 temp_html이 다른 값을 return 받을 수 있기 때문에 섹션 중복될 일도 없었다.
id 및 주소값들이 모두 '문자열'이라는 점을 이용해서 i라는 숫자를 문자열에 추가한 것이다.

결과물: