Lately, I've been developing a website, and I'm using the Firebase Realtime Database to fetch some data inserted by the users previously and show them as Bootstrap Cards as seen on these images.
Firebase Realtime Database - 1st card
Firebase Realtime Database - 2nd card
However, I'm encountering a problem I'm unable to solve.
I've been trying to insert the rest of the data received by Firebase Realtime Database into a Bootstrap Modal dynamically so that the website's interface doesn't get overfilled, but I'm not being able to do it.
For example, if I click on the first card instead of seeing the "Ola" I've printed to test if the Modal text was working I would like to see inside the Bootstrap Modal: Feridos: "1-3" and if I click on the second card instead of seeing the "Ola" I would like to see inside the Modal: "Descrição: Testing"
I've created a JSFiddle with all of my code => JSFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project</title>
<link rel="stylesheet" href="pagInicial.css"/>
<script type="module" src="denuncias.js"></script>
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.2.2/firebase-app.min.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.1.3/firebase-database.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
</head>
<body>
<p id="avisoDenunciasVazio">Não existem denúncias para apresentar</p>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
</div>
<div id="dadosCardDenuncia" class="modal-body">
<p>Ola</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container mb-5">
<div id="cardsDenuncia" class="row row-cols-1 row-cols-md-4 g-4">
</div>
</div>
</body>
</html>
JS:
import { db, auth, firebaseRef, firebaseConfig, child, get, ref } from './firebase.js'
let listaDenuncias = []
const listaIDs = []
let tipoDenuncia = ''
let alturaOcorrencia = ''
let nome = ''
let horaDenuncia = ''
let dataDenuncia = ''
let idQueixa = ''
let feridos = ''
export function mostrarDados () {
// Obter todos os registos das Denuncias
get(child(ref(db), 'Denuncia/')).then((snapshot) => {
// Limpar lista de denuncias
console.log('Lista limpa')
listaDenuncias = []
$('#cardsDenuncia').empty()
adicionarDados(listaIDs)
if (snapshot.exists()) {
document.getElementById('avisoDenunciasVazio').style.display = 'none'
snapshot.forEach(childSnapshot => {
console.log('childSnapshot: ' + JSON.stringify(childSnapshot))
childSnapshot.forEach(dadosSnapshot => {
console.log('aux: ' + JSON.stringify(dadosSnapshot))
console.log('aux.key: ' + JSON.stringify(dadosSnapshot.key))
dadosSnapshot.forEach(element => {
console.log('idQueixa: ' + JSON.stringify(element.key))
idQueixa = element.key
console.log('Tipo Denuncia: ' + JSON.stringify(childSnapshot.key))
tipoDenuncia = childSnapshot.key
console.log('Altura Ocorrencia: ' + JSON.stringify(dadosSnapshot.key))
alturaOcorrencia = dadosSnapshot.key
console.log('Data: ' + JSON.stringify(element.child('dataDenuncia').val()))
dataDenuncia = element.child('dataDenuncia').val()
console.log('Hora: ' + JSON.stringify(element.child('horaDenuncia').val()))
horaDenuncia = element.child('horaDenuncia').val()
console.log('Nome: ' + JSON.stringify(element.child('nome').val()))
nome = element.child('nome').val()
feridos = element.child('feridos').val()
if (alturaOcorrencia === 'Quero dar a Conhecer') {
listaDenuncias.push({ idQueixa, tipoDenuncia, alturaOcorrencia, dataDenuncia, nome: 'Anónimo', horaDenuncia })
} else {
listaDenuncias.push({ idQueixa, tipoDenuncia, alturaOcorrencia, dataDenuncia, nome, horaDenuncia })
}
})
})
})
console.log('listaDenuncias: ' + JSON.stringify(listaDenuncias, null, 4))
listaDenuncias.forEach(function (dados) {
adicionarCards(dados.idQueixa, dados.tipoDenuncia, dados.alturaOcorrencia, dados.dataDenuncia, dados.horaDenuncia, dados.nome)
})
} else {
console.log('Nao tem dados')
document.getElementById('avisoDenunciasVazio').style.display = 'block'
}
}).catch((error) => {
console.error('Erro =>' + error)
})
function adicionarCards (idQueixa, tipoDenuncia, alturaOcorrencia, dataDenuncia, horaDenuncia, nome) {
const card = `<div class="col-md-4" data-toggle="modal" data-target="#exampleModal">
<div id="${idQueixa}" class="card">
<div class="card-body">
<h2 class="card-title">Denuncia</h2>
<div class="d-flex flex-column">
<p class="card-text aumentar-row"> Tipo: ${tipoDenuncia} </p>
<p class="card-text diminuir-row"> Ocorrência: ${alturaOcorrencia} </p>
<p class="card-text diminuir-row"> Data: ${dataDenuncia} </p>
<p class="card-text diminuir-row"> Hora: ${horaDenuncia} </p>
<p class="card-text diminuir-row"> Nome: ${nome} </p>
</div>
</div>
</div>
</div>`
document.getElementById('cardsDenuncia').innerHTML += card
listaIDs.push(card)
}
function adicionarDados (listaIDs) {
$('#exampleModal').on('show.bs.modal', function (e) {
const dados = `<p>Feridos: ${feridos}</p>`
document.getElementById('dadosCardDenuncia').innerHTML = dados
})
}
}
$(document).ready(function () {
mostrarDados()
})
I'll provide any extra code if needed. Thank you
I've solved my issue with this piece of code on JS
...
function adicionarDados (idQueixa) {
feridos = listaDenuncias.at(this.idQueixa).feridos
$('#exampleModal').on('show.bs.modal', function (e) {
const dados = `<p>Feridos: ${feridos}</p>`
document.getElementById('dadosCardDenuncia').innerHTML = dados
})
...