Question: In this code I´m traying to show the local storage in DOM, how I can show the "li" of the second for inside of the "ul" in the first for?
to show it like this? :
<div id = "receta${[i]}">
<h2>${recetasLocales[i].nombreReceta}</h2>
<ul><li>${recetasLocales[i].ingredientes[n].nombre}</li></ul>
<p>${recetasLocales[i].procedimiento}</p>
</div>
This is the code I wrote, if you see in the case both innerHTML obviouly will be separate and I dont want that.
mostrar.addEventListener('click', () => {
let recetasLocales = JSON.parse(localStorage.getItem('recetasLocales'))
for (let i = 0; i < recetasLocales.length; i++) {
listaReceta.innerHTML +=`
<div id = "receta${[i]}">
<h2>${recetasLocales[i].nombreReceta}</h2>
<ul></ul>
<p>${recetasLocales[i].procedimiento}</p>
</div>
`
for (let n = 0; n < recetasLocales[i].ingredientes.length; n++) {
listaReceta.innerHTML += `
<li>${recetasLocales[i].ingredientes[n].nombre}</li>
`
}
}
Another way to do this kind of thing without concatenating strings all the time is to use document.createElement() and appendChild().
Note this uses
textContentwhich prevents XSS attacks as it is not parsed as HTML.
See this minimal example.
const someValues = [
[1, 2],
[1, 2],
[1, 2],
[1, 2],
];
// create div which contains the lists
const div = document.createElement("div");
for (let i = 0; i < someValues.length; i++) {
// create heading
const heading = document.createElement("h2");
heading.textContent = `My heading for element ${i}`;
// create list
const list = document.createElement("ul");
for (let j = 0; j < someValues[i].length; j++) {
const element = someValues[i][j];
// create a new list item
const listItem = document.createElement("li");
listItem.textContent = element;
// add list item to list
list.appendChild(listItem);
}
// adding it all together
div.appendChild(heading);
div.appendChild(list);
}
document.addEventListener("DOMContentLoaded", function (event) {
const content = document.getElementById("test");
content.appendChild(div);
});<div id="test"></div>There are multiple ways of performing this operation.
One way is to have a string variable and manipulate it to your liking.
Example:
mostrar.addEventListener('click', () => {
let recetasLocales = JSON.parse(localStorage.getItem('recetasLocales'))
for (let i = 0; i < recetasLocales.length; i++) {
let str =`
<div id = "receta${[i]}">
<h2>${recetasLocales[i].nombreReceta}</h2>
<ul>
`
for (let n = 0; n < recetasLocales[i].ingredientes.length; n++) {
str += `
<li>${recetasLocales[i].ingredientes[n].nombre}</li>
`
}
str+=`</ul>
<p>${recetasLocales[i].procedimiento}</p>
</div>`
listaReceta.innerHTML=str
}