Я знаю, что это не очень сложно, но я только начинаю с firebase. И мой вопрос заключается в том, как я могу отображать данные в том порядке, в котором они были созданы с помощью Firebase. В настоящее время я заказываю по названию.
Вот как я пишу в своей базе данных и затем отображаю
// displaying and deleting data
function renderCafe(doc) {
let li = document.createElement('li')
let name = document.createElement('name')
let phone = document.createElement('phone')
let specialist = document.createElement('specialist')
let data = document.createElement('data')
let cross = document.createElement('div')
li.setAttribute('data-id', doc.id)
name.textContent = doc.data().name;
phone.textContent = doc.data().phone;
specialist.textContent = doc.data().specialist;
data.textContent = doc.data().data;
cross.textContent = 'x';
li.appendChild(name);
li.appendChild(phone);
li.appendChild(specialist);
li.appendChild(data);
li.appendChild(cross);
doctorList.appendChild(li);
//deleting data
cross.addEventListener('click', (e) => {
e.stopPropagation();
let id = e.target.parentElement.getAttribute('data-id');
db.collection('patients').doc(id).delete();
})
}
// real-time listener
const doctorList = document.querySelector('.patients');
db.collection('patients').onSnapshot(snapshot => {
let changes = snapshot.docChanges();
changes.forEach(change => {
if(change.type == 'added') {
renderCafe(change.doc);
} else if (change.type == 'removed') {
let li = doctorList.querySelector('[data-id=' + change.doc.id +']');
doctorList.removeChild(li);
}
})
})
Так я создаю документы
const createForm1 = document.querySelector('#patient');
createForm1.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('patients').add({
name: createForm1['name'].value,
phone: createForm1['phone'].value,
specialist: createForm1['specialist'].value,
data: createForm1['date'].value
}).then(() =>{
//clear data
document.getElementById('patient').reset();
document.querySelector('.alert1').style.display='block';
// Hide alert after 3 seconds
setTimeout(function(){
document.querySelector('.alert1').style.display='none';
},3000);
})
})