This is the table
function for adding data into a table:
const table = () => {
let table_details = document.getElementById("table_details")
let data = localStorage.getItem("projects")
if (data == null) {
arr = []
}
else {
tabledata = JSON.parse(data);
}
console.log(tabledata)
projectTable = ""
tabledata.map((items, index) => {
projectTable += `<tr><td>${index}</td> <td>${items.pname}</td> <td>${items.pleader}</td> <td>${items.pstatus}</td> <td>${items.pcompany}</td><tr/>`
})
tabledata.length > 0 ? (table_details.innerHTML = projectTable) : (`No project found !`)
}
This is the projectDetails
function for showing data as cards:
const projectDetails = () => {
let projectDetails = document.getElementById("project_details");
let data = localStorage.getItem("projects");
if (data == null) {
arr = [];
}
else {
projectdata = JSON.parse(data); //converting data into an array
}
showDetails = "";
console.log(projectdata)
projectdata.forEach((items, index) => {
showDetails += ` <div class="card-body col-6 p-3 " style ="width:30rem">
<span class ="card-title"><p class = "text-info">projectName: ${items.pname}</p> <a href="#"> leader:${items.pleader} </a>
</span><p class ="card-text p-0">description:${items.pdesc}</p><p class = "text-muted p-0 m-0">[status:${items.pstatus}] <br> <button onclick = "deleteProject(${index})" class = "btn btn-info p-1">delete</button>
</div> <hr>`
});
if (projectdata.length > 0) {
projectDetails.innerHTML = showDetails
}
else {
(projectDetails.innerHTML = `<h4 class = "text-danger"><strong>No Projects Found !</strong></h4>`);
}
}
This is how both functions get called:
table();
projectDetails();
When calling two functions, only one function is working: the one which is called first.