Displaying array data from session to html table

Question

I've copied data of a html table on page 1 in an array obj(arrData). And i've save that arrData into the session storage. Now on page 2, how do i display the data from the arrData to the html table. New in JS. Thanks in advance

PAGE 1 JS

var arrData=[];               
$("#checkout").on('click',function(){

$("#table tr").each(function(){
    var currentRow=$(this);

    var col1_value=currentRow.find("td:eq(0)").text();
    var col2_value=currentRow.find("td:eq(1)").text();
    var obj={};

    obj.col1=col1_value;
    obj.col2=col2_value;

    arrData.push(obj);
   sessionStorage.myArrData=JSON.stringify(arrData);
 });
console.log(arrData);

});

PAGE 2

<table class="table table-checkout" id="table">
<thead>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
</thead>
<tbody>
</tbody>

PAGE 2 JS

var arrData = JSON.parse(sessionStorage.myArrData);

speciesUnknown · Answer 1 · 2018-08-11T18:57:18.643

0

You need to use sessionStorage.setItem("foo", 12) rather than sessionStorage.foo = 12;

The latter is attaching a new property to the javascript object, not talking to the browser session API. When the page reloads, the object you attached is gone.

To get the item back, use sessionStorage.getItem

Mozilla docs for sessionStorage including setItem and getItem

Once you've done that, you will need a way of creating new table rows in the table. There are a multitude of frameworks for this purpose, but you can also build tables (with a few more steps than with other elements) yourself

How to insert row in HTML table body in Javascript?

edited Aug 11 '18 at 18:57

answered Aug 11 '18 at 18:44

speciesUnknown

1,644
2
14
27

i've added the JS for page 2. I've checked the console log for arrData in page2 and it does contain the data table from page 1. The problem i have is how do i transfer them to the html table. – tuturu1014 Aug 11 '18 at 18:50
Ok, I'll expand the answer to cinlude the next stage – speciesUnknown Aug 11 '18 at 18:53
but how do i get the data from the arrData ? i mean how do i place the data value from arrData into newRow.insertCell – tuturu1014 Aug 11 '18 at 19:01
added a picture to clarify what i really want – tuturu1014 Aug 11 '18 at 19:25

score 0 · Answer 2 · answered Aug 11 '18 at 19:57

As I understand from above, You have data in array of objects after var arrData = JSON.parse(sessionStorage.myArrData);, in below format..

arrData:

[
{col1:"Item1", col2:"quantity1"},
{col1:"Item1", col2:"quantity1"},
...
]

Now to display this data on Page 2

var rows = "";
arrData.map((row)=>{
   var row = '<tr><td>'+row.col1+'</td><td>'+row.col2+'</td></tr>';
   rows = rows+row;
})
var tbody = document.queryselector('#table tbody');
tbody.innerHTML = rows;

Displaying array data from session to html table

2 Answers2