0
96
VistasCreación de HTML a partir de datos de almacenamiento local
Quiero tomar datos de mi almacenamiento local y mostrarlos dinámicamente. En esta tabla a continuación está el código que probé pero no funciona.
<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>+</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>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Puedes hacerlo con JS simple como este. Tuve que comentar los lugares con almacenamiento local. Porque el acceso a localStorage no está permitido en SO. Tan pronto como los agregas, funciona.
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>
·
Juan Pablo Isaza
Denunciar
0
Puede usar insertAdjacentHTML y literals templates para este tipo de operación.
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta