How do I use the same data from the selected item from the list below and display it on another page, similar to Intents in Java.
This is the layout of the list in HTML:
<body>
<div>
<img src="./res/Logo.png" alt="App Logo" class="logo">
</div>
<ul id="list">
</ul>
</body>
And here is how the necessary data is being retrieved from Firebase:
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
function emergencyItemList(scenario, emergencyType) {
var ul = document.getElementById("list");
var li = document.createElement('li');
var form = document.createElement('form');
var img = document.createElement('img');
img.src = 'Vector.jpg';
img.alt = 'Vector Icon';
var pScenario = document.createElement('p');
pScenario.innerHTML = 'Scenario: ' + scenario;
var pEmergencyType = document.createElement('p');
pEmergencyType.innerHTML = 'Emergency Type: ' + emergencyType;
var a = document.createElement('a');
a.href = 'Maps.html';
var input = document.createElement('input');
input.className = 'btn';
input.type = 'submit';
input.value = 'View Emergency Location';
a.appendChild(input);
form.appendChild(img);
form.appendChild(pScenario);
form.appendChild(pEmergencyType);
form.appendChild(a);
li.appendChild(form);
ul.appendChild(li);
}
function fetchAllData() {
const dbRef = ref(db, 'Admin Users/Emergencies');
get(dbRef).then((snapshot) => {
if (snapshot.exists()) {
snapshot.forEach((childSnapshot) => {
let scenario = childSnapshot.val().Scenario;
let emergencyType = childSnapshot.val().emergencyType;
emergencyItemList(scenario, emergencyType);
});
} else {
console.log("No data available");
}
}).catch((error) => {
console.error(error);
});
}
window.onload = fetchAllData;
I’m retrieving the data from Firebase, here is the schema:
"Emergencies": {
"ETNQlDMHTcUPwWnAWteNBdznzNu2": {
"Scenario": "Scenario 2",
"emergencyType": "Medical Assistance",
}
}
Is there any way to do this similarly to what can be done for Android?