본문 바로가기

카테고리 없음

Firebase collection의 문서의 데이터를 가져와 사용하기

// Firebase firestore에서 're-movies' 컬렉션의 모든 문서를 가져오기
let docs = await getDocs(collection(db, 're-movies'));

// 가져온 문서들을 반복하여 각 문서의 데이터를 사용하여 카드 생성
docs.forEach((doc) => {

// 현재 반복 중인 문서의 데이터를 가져와서 'row'변수에 할당
  let row = doc.data();

// 현재 문서에서 필요한 데이터를 추출
  let image = row['image'];
  let title = row['title'];
  let star = row['star'];
  let comment = row['comment'];

// 동적으로 생성된 HTML 카드 탬플릿
  let temp_html = `
                            <div class="col">
                                <div class="card h-100">
                                    <img
                                        src="${image}"
                                        class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">${title}</h5>
                                        <p class="card-text">${star}</p>
                                        <p class="card-text">${comment}</p>
                                    </div>
                                </div>
                            </div>`;
                            
// 동적으로 생성된 카드를 '#cards'요소에 추가
  $('#cards').append(temp_html);
});