Cutie Pie Cutie Pie - 5 months ago 10
HTML Question

How to put local storage data into a table

So I have data stored in local storage and so im trying to call ca function that will display that data. However, I am able to see the data but it does not show in the table. If some1 can tell me how to modify my code so that the data is shown in the table in its applied cell than that would be great.
Heres my javascript:

function call() {
'use strict';
var get, create, text, i;
get = localStorage.getItem("A");//retrieves announcements from local storage
create = JSON.parse(get);

text = "";
for (i = 0; i < 1; i++) { //displays multiple announcements
text += "<td>" + create[i].username;//displaysname
text += "<td>" + create[i].club;//displaysclub
text += "<td>" + create[i].category;//displayscategory
text += "<td>" + create[i].grade;//displaysgrade
text += "<td>" + create[i].gender;//displaysgender
text += "<td>" + create[i].Time;//displaystime
text += "<td>" + create[i].detail + "<tr>";
}
document.getElementById("cool").innerHTML = text;


}

Heres my html page where the table is created.

<title>Homepage Announcements</title>
</head>
<fieldset display:inline-block>
<legend class="legend">
Announcement Creator</legend>

<body>
<div class="button">
<button value="call" value="Display Announcements" onclick="call()">Display Announcements</button></div>


<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
background-color: #4CAF50;
color: white;
}
</style>
<thead>
<table>
<tr>
<th class="head">Username</th>
<th class="head">Club</th>
<th class="head">Category</th>
<th class="head">Grade</th>
<th class="head">Gender</th>
<th class="head">Time</th>
<th class="head">Detail</th>
</tr>


</table>
</thead>
<p id="cool"></p>


THIS IS THE JSON part:

var index = 0;
var announcement = [];
function rtdata() {
'use strict';
window.alert("Your announcement has been posted!");
announcement[index] = {
username : document.getElementById("username").value,
club : document.getElementById("club").value,
category : document.getElementById("category").value,
grade : document.getElementById("grade").value,
gender : document.getElementById("gender").value,
time : document.getElementById("time").value,
details : document.getElementById("details").value
};
index = index + 1;
localStorage.setItem("A", JSON.stringify(announcement));
}

Answer

Change your HTML to this :

<table>
<thead>
                  <tr>
                    <th class="head">Username</th>
                    <th class="head">Club</th>
                    <th class="head">Category</th>
                    <th class="head">Grade</th>
                    <th class="head">Gender</th>
                    <th class="head">Time</th>
                    <th class="head">Detail</th>
                  </tr>
</thead>
<tbody id="cool">
</tbody>

</table>

And you javascript to this :

for (i = 0; i < create.length; i++) { //displays multiple announcements
    text += "<tr>";
    text += "<td>" + create[i].username+ "</td>";//displaysname
    text += "<td>" + create[i].club+ "</td>";//displaysclub
    text += "<td>" + create[i].category+ "</td>";//displayscategory
    text += "<td>" + create[i].grade+ "</td>";//displaysgrade
    text += "<td>" + create[i].gender+ "</td>";//displaysgender
    text += "<td>" + create[i].Time+ "</td>";//displaystime
    text += "<td>" + create[i].detail+ "</td></tr>";
}
Comments