I want to take data from my local storage and show it dynamically. In this table below is the code that I tried but it is not working.

<script>
   var cart= JSON.parse( localStorage.getItem('Mylinklist'));
    $.each(Mylinklist, function(key, value){
    $('tbody').append(`<tr>
    <td>${cart.name}</td>
    <td>${cart.url}</td>
    </tr>`)
    })
</script>

<div id="actionerpanel" class="col col-lg-6 col-12 ">
  <div class="rapi-card m-lg-5 m-1">
    <b class="rapi-card-colored-header p-3  mb-2">Quick Links  <a href="add.html" class=""> <span>&#43;</a></span></b>
                
        <div class="container">
                
        <div class="row justify-content-center "><table class="table">
            <thead>
                <tr>
                   <th scope="col">Link Name</th>
                   <th scope="col">Url</th>
                   <th scope="col">Actions</th>
                </tr>
               </thead>
            <tbody>
                      
                </tbody>
                </table>
        </div>
        </div>
                    
        </div>
        </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use insertAdjacentHTML and literals templates for this kind of operation.

var carts = [{
  id: 'id1',
  name: 'test',
  url: 'url'
}, {
  id: 'id2',
  name: 'test2',
  url: 'url2'
}] //Fake localstorage replace it with JSON.parse
carts.forEach(cart => {
  let button = `<button onclick="alert('Item id : ${cart.id}')">Click</button>`,
    row = `<tr id="item_${cart.id}"><td>${cart.name}</td><td>${cart.url}</td><td>${button}</td></tr>`;
  document.querySelector('tbody').insertAdjacentHTML('beforeend', row)
})

//OR

for (let cart of carts) {
  let button = `<button onclick="alert('Item id : ${cart.id}')">Click</button>`,
    row = `<tr id="item_${cart.id}"><td>${cart.name}</td><td>${cart.url}</td><td>${button}</td></tr>`;
  document.querySelector('tbody').insertAdjacentHTML('beforeend', row)
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">Link Name</th>
      <th scope="col">Url</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can make it with plain JS like this. I had to comment out the places with localstorage. Because access to localStorage is not allowed on SO. As soon as you add them, it works.

const arr = [
  {id: 123, name: "google", url: "https://www.google.com"},
  {id: 124, name: "bing", url: "https://www.bing.com"},
]

// store to localStorage
//    localStorage.setItem('Mylinklist', JSON.stringify(arr));

// get from localStorage
//    const data = JSON.parse(localStorage.getItem('Mylinklist'));
const table = document.querySelector('.table');
// change obj.forEach to data.forEach because in SO you cant use localStorage!!!
arr.forEach((e) => {
  let tr = document.createElement('TR');
  let td_name = document.createElement('TD');
  let td_url = document.createElement('TD');
  td_name.innerHTML = e.name
  td_url.innerHTML = e.url
  tr.append(td_name)
  tr.append(td_url)
  table.append(tr)
})

<div class="row justify-content-center "><table class="table">
       <thead>
         <tr>
          <th scope="col">Link Name</th>
          <th scope="col">Url</th>
          <th scope="col">Actions</th>
         </tr>
      </thead>
    <tbody>
                      
  </tbody>
</table>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>