Мои данные отображаются два раза при изменении данных ⇐ Javascript

[Anonymous]

Я изучаю Firebase и сделал простой HTML -файл, где я могу загрузить тему и контент. Проблема в том, что всякий раз, когда я публикую новый контент, делаю подъем или удаляю сообщение из базы данных, весь контейнер отображается дважды. Как я могу решить эту проблему?

Код: Выделить всё

import {
initializeApp
} from 'https://www.gstatic.com/firebasejs/11.4.0/firebase-app.js';

import {
getDatabase,
ref,
set,
push,
onValue,
update,
increment
} from 'https://www.gstatic.com/firebasejs/11.4.0/firebase-database.js';

import firebaseConfig from './configs.js'

const app = initializeApp(firebaseConfig);
const db = getDatabase();

var gossip_submit = document.querySelector("#gossip-submit")

gossip_submit.addEventListener('click', (e) => sendGossip(e))

function sendGossip(e) {
var gossip_title = document.querySelector('#gossip_title').value
var gossip_content = document.querySelector('#gossip_content').value

if (gossip_title == "" || gossip_content == "") {
alert("Empty fields detected.")
return
}
e.preventDefault()
console.log("clicked")
console.log(gossip_title)
console.log(gossip_content)
document.querySelector('#gossip_title').value = "";
document.querySelector('#gossip_content').value = "";

writeUserData(gossip_title, gossip_content)
}

function writeUserData(gossip_title, gossip_content) {
var post_unique_key = push(ref(db, 'posts/')).key
set(ref(db, 'posts/' + post_unique_key), {
gossip_title: gossip_title,
gossip_content: gossip_content,
upvotes: 0,
downvotes: 0,
timestamp: new Date().getTime(),
comments: {}
});

}

function getDataWithKey(key) {
onValue(ref(db, 'posts/' + key), (snapshot) => {
const data = snapshot.val();
console.log(data)
});
}

let gossip_container = document.querySelector('.gossip-container')

function getAllData() {
gossip_container.innerHTML = '';
onValue(ref(db, 'posts/'), (snapshot) =>  {
const data = snapshot.val();
for (const key in data) {
console.log(data[key])
let card_div = document.createElement('div')
card_div.classList.add('card')
let card_body = document.createElement('div')
card_body.classList.add('card-body')
let card_title = document.createElement('h5')
card_title.classList.add('card-title')
card_title.innerText = data[key].gossip_title
let card_text = document.createElement('p')
card_text.classList.add('card-text')

let span_downvote = document.createElement('span')
span_downvote.classList.add('downvote')
span_downvote.innerHTML = '
'
let span_upvote = document.createElement('span')
span_upvote.classList.add('upvote')
span_upvote.innerHTML = ''

card_text.innerText = data[key].gossip_content
card_body.appendChild(card_title)
card_body.appendChild(card_text)
card_body.appendChild(span_upvote)
card_body.appendChild(span_downvote)
card_div.appendChild(card_body)
gossip_container.appendChild(card_div)

span_upvote.addEventListener('click', function() {
span_upvote.classList.toggle('on');
span_downvote.classList.remove('on');
console.log('upvote:', span_upvote.classList.contains('on'));
// updateUpvoteCount(key)
console.log(card_text.innerText)
console.log(key)

});
span_downvote.addEventListener('click', function() {
span_downvote.classList.toggle('on');
span_upvote.classList.remove('on');
console.log('downvote:', span_downvote.classList.contains('on'));
console.log(key)

});
}
});
}

getAllData()< /code>



What do u want to gossip about?


What do u want to say?


submit

Подробнее здесь: https://stackoverflow.com/questions/794 ... hange-data