First time using firebase as backend for web development. Created the front end successfully. Now blocked with the backend. The table I try to fill remains empty. Values im collecting is from firebase database using Javascript. Below is a screenshot of the table.
.
Error Uncaught SyntaxError SyntaxError: Unexpected token 'export' at (program) (https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js:2348:1) Uncaught SyntaxError SyntaxError: Cannot use import statement outside a module at (program) (https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js:1:1) Uncaught SyntaxError SyntaxError: Cannot use import statement outside a module at (program) (https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js:1:1) Uncaught ReferenceError ReferenceError: initializeApp is not defined at (c:\Users\HP\Desktop\IS_SK4\myHouse_web\myHouse\requests.html:149:23)
The code is ==>
<!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>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!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>MyHouse</title>
<a href="index.html">
<H1>My House- Build Your Home</H1>
</a>
<!--navigation-->
<nav>
<li><a href="index.html">Home</a></li>
<li><a href="Bid.html">Bid</a></li>
<li><a href="requests.html">Client Request</a></li>
</ul>
</nav>
</head>
<style>
* {
box-sizing: border-box;
}
body {
background: #92bde7;
color: #485e74;
line-height: 1.6;
font-family: 'Courier New', Courier, monospace;
padding: 1em;
}
.container {
max-width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 1em;
}
.ul {
list-style: none;
padding: 0;
}
.brand {
text-align: center;
}
.wrapper {
box-shadow: 0 0 20px black;
background-color: white;
}
.wrapper>* {
padding: 1em;
}
.form form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.form form label {
display: block;
}
.form form p {
margin: 0;
}
.form form .full {
grid-column: 1/3;
}
.form form button,
.form form input,
.form form textarea {
width: 30%;
}
.form form button {
background-color: #92bde7;
border: 0;
}
.label input {
align-items: baseline;
}
</style>
<body>
<div >
<h1 >MyHouse</h1>
<div >
<h3>Customer Requests</h3>
<div >
<table >
<thead>
<th>Customer Name</th>
<th>Type of Land</th>
<th>Grey House finish?</th>
<th>Number of Rooms</th>
<th>House Size</th>
<th>Tiling type</th>
</thead>
</table>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js"></script>
<script type="module">
const firebaseConfig = {
apiKey: "AIzaSyCTAL6OnIJbEqOSi8jopSu9SfLjAb1TtoQ",
authDomain: "myhouse-4ba96.firebaseapp.com",
databaseURL: "https://myhouse-4ba96-default-rtdb.firebaseio.com",
projectId: "myhouse-4ba96",
storageBucket: "myhouse-4ba96.appspot.com",
messagingSenderId: "843377498383",
appId: "1:843377498383:web:9996b1ee834ec89ef6867a",
measurementId: "G-Q0QWXPT5S9"
};
// Initialize Firebase
const app=initializeApp(firebaseConfig);
var firebaseRef=app.database().ref('quotation');
var id = 0;
var tbody = document.getElementById('tbody1');
function addItem(doors, land, notGrey, rooms, size, tiles) {
let trow = document.createElement("tr");
let td1 = document.createElement('td');
let td2 = document.createElement('td');
let td3 = document.createElement('td');
let td4 = document.createElement('td');
let td5 = document.createElement('td');
let td6 = document.createElement('td');
td1.innerHTML = doors;
td2.innerHTML = land;
td3.innerHTML = notGrey;
td4.innerHTML = rooms;
td5.innerHTML = size;
td6.innerHTML = tiles;
trow.appendChild(td1);
trow.appendChild(td2);
trow.appendChild(td3);
trow.appendChild(td4);
trow.appendChild(td5);
trow.appendChild(td6);
tbody.appendChild(trow);
}
function AddAllItemsToTable(quotation) {
tbody.innerHTML = "";
quotation.forEach(element => {
AddAllItemsToTable(element.doors, element.land, element.notGrey, element.rooms, element.size, element.tiles);
});
}
firebaseRef.on('value',function(snapshot)
{
var data=snapshot.val();
for(let i in data)
{
console.log(data[i]);
}
})
function getAllDataOnce() {
var dbref = ref(db,'quotation');
onValue(db,(snapshot)=>
{
var client=[];
snapshot.forEach(childSnapshot =>{
client.push(childSnapshot.val());
});
AddAllItemsToTable(client);
});
}
window.onload = getAllDataOnce;
</script>
</body>
</html>
</body>
</html>
CodePudding user response：
It seems like you have a mistake in here:
function AddAllItemsToTable(quotation) {
tbody.innerHTML = "";
quotation.forEach(element => {
AddAllItemsToTable(element.doors, element.land, element.notGrey, element.rooms, element.size, element.tiles);
});
}
Inside this AddAllItemsToTable, you're calling AddAllItemsToTable again. I think you'll want to call addItem instead.
I highly recommend getting comfortable with stepping through your code in a debugger, which is typically the fastest way to spot a problem such as this by yourself.
CodePudding user response：
const data = snapshot.val()
Solved the problem