I've been trying to figure this out all day by searching online, but I'm still stuck.
My code is quite long and runs fine in Firefox, but Chrome throws an error: "Uncaught SyntaxError: Unexpected token u".
Could someone please point out where I went wrong? Thanks in advance!
// Display all current contacts when the page loads
$(document).ready(function(){
// Check if localStorage database exists
if(!localStorage.getItem("customerDatabase")){
// Create a JSON object to store addresses
var contacts = {
"users":[
{
"id":"1",
"name":"dennis",
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c7c6cdcdcad0c1ccdad0e3c4cec2cacf8dc0ccce">[email protected]</a>"
},
{
"id":"2",
"name":"zoe",
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="344e5b515d47525159555851745359555d581a575b59">[email protected]</a>"
}
]
};
// Convert the object to a string
var stringObject = JSON.stringify(contacts);
// Store it in localStorage
var storedDatabase = localStorage.setItem("customerDatabase", stringObject);
} else {
// List all customers on page load
listJSONCustomers();
}
// Function to display all contacts from JSON object in localStorage
function listJSONCustomers(){
var displayHTML = "";
var i;
// Get data from localStorage
var storedDatabase = localStorage.getItem("customerDatabase");
// Parse the data to a JSON object
var parseObject = JSON.parse(storedDatabase);
// Access the users key of the JSON object
var userObject = parseObject.users;
// Get the number of customers in the database
var contactsLength = userObject.length;
for(i=0; i<contactsLength; i++){
var trElement = '<tr id="address' + (i+1) + '">';
var tdId = '<td id="id' + (i+1) + '">' + userObject[i].id + '</td>';
var tdName = '<td id="name' + (i+1) + '">' + userObject[i].name + '</td>';
var tdEmail = '<td id="email' + (i+1) + '">' + userObject[i].email + '</td>';
var tdButton = '<td id="button"><button id="editButton' + userObject[i].id + '">Edit</button> | <button id="deleteButton' + userObject[i].id + '">Delete</button></td>';
displayHTML += trElement + tdId + tdName + tdEmail + tdButton + '</tr>';
}
$('#address_list').html(displayHTML);
}
// Add customer to the database
$('#saveCustomer').click(function(){
if( $('#customerName').val() !== "" && $('#customerEmail').val() !== "" ){
var customerName = $('#customerName').val();
var customerEmail = $('#customerEmail').val();
// Get data from localStorage
var storedDatabase = localStorage.getItem("customerDatabase");
// Parse the data to a JSON object
var parseObject = JSON.parse(storedDatabase);
// Access the users key of the JSON object
var userObject = parseObject.users;
// Create new entry
var newCustomerObject = {
"id": userObject.length + 1,
"name": customerName,
"email": customerEmail
};
// Add the new entry to the object
userObject.push(newCustomerObject);
// Convert the object to a string for localStorage
var stringObject = JSON.stringify(parseObject);
// Store the JSON object in localStorage
var storedDatabase = localStorage.setItem("customerDatabase", stringObject);
// List all customers again whenever a new entry is added
listJSONCustomers();
} else {
alert("Please enter the customer's name and email.");
}
}); // End of $('#saveCustomer').click();
});