У меня есть некоторые данные в моей базе данных облачного пожарного хранилища. Я пытаюсь получить данные и отобразить их на моей странице html, но это не позволяет мне получить сообщение консоли. Я уже в состоянии извлечь данные на мою домашнюю страницу с помощью функции setupProp, но когда я добавил функцию setupIndProp для передачи данных на мою под html страницу, она не работает. Примечание. Когда я удаляю функцию setupIndProp (data), она отображается на моей странице, но без каких-либо динамических данных c (только для тестирования), но когда я покидаю ее, как показано ниже, код исчезает. код ниже, где я получаю данные из базы данных:
// get data from the cloud Database
db.collection('properties').onSnapshot(snapshot => {
setupProp(snapshot.docs);
setupIndProp(snapshot.docs); // added setupIndProp func in order to pass my data to my sub html page
});
, и это мой js файл для страницы sub html, где у меня возникает проблема при добавлении setupIndProp:
const allProperties = document.querySelector('.all-properties');
const setupIndProp = data => {
data.forEach(doc => {
const info = doc.data();
let html = `
<div class="row">
<div class="col l6 s12 m12">
<div class="card" style="height: auto; border-radius: 5px; background-color: #f9f9f9; padding: 10px;">
<h5 class="center">${info.title}</h5><br><br>
<span style="font-weight: bold;">Price: ${info.price} $</span><br><br>
<span><i class="material-icons blue-text">room</i> Located in ${info.city}</span><br><br>
<span><i class="material-icons blue-text">single_bed</i> Total Rooms ${info.rooms}.</span><br>
</div>
</div>
</div>
`;
allProperties.innerHTML = html;
})
}
А вот моя страница под HTML, на которой ничего не отображается:
<div class="container all-properties" style="height: auto;">
</div>