Wie kann ich eine Tabelle aus einem Array im local storage rendern?

Moin! Ich muss in HTML einen kleinen Blog erstellen. Ich habe es bereits geschafft Blog Beiträge zu den Favoriten hinzuzufügen und die relevanten infos im Local Storage zu speichern. Das Array sieht so aus:

titel: "TestArtikel1",

autor: "Max Mustermann",

url: "http://TestArtikel1.html",

bild_url: "http://img/Artikelbild1.jpg",

Nun geht es darum mit js eine funktion zu schreiben mit der man das Array aus dem local Storage auf der Seite zu rendern. Kennt sich zufällig jemand damit aus und kann mir helfen das ich die Tabelle gerendert bekomme? Hab garantiert nicht alle relevanten infos hier in der Frage drin falls noch was fehlt bitte gerne kurz bescheid sagen :) Die momentane Funktion sieht bei mir so aus:

function renderFavoriten() {

    const favoriten = JSON.parse(localStorage.getItem('favoriten'));

 

    const tableBody = document.getElementById('favoriten-body');

    tableBody.innerHTML = ''; // Lösche alle bestehenden Zeilen

 

    if (favoriten && favoriten.length > 0) {

      favoriten.forEach((favorit, index) => {

        const row = document.createElement('tr');

 

        const titelCell = document.createElement('td');

        titelCell.textContent = favorit.titel;

        row.appendChild(titelCell);

 

        const autorCell = document.createElement('td');

        autorCell.textContent = favorit.autor;

        row.appendChild(autorCell);

 

        const entfernenCell = document.createElement('td');

        const entfernenButton = document.createElement('button');

        entfernenButton.type = 'button';

        entfernenButton.textContent = 'Aus Favoriten entfernen ❌';

        entfernenButton.addEventListener('click', () => {

          entferneVonFavoriten(index);

          renderFavoriten();

        });

        entfernenCell.appendChild(entfernenButton);

        row.appendChild(entfernenCell);

 

        tableBody.appendChild(row);

      });

    } else {

      const emptyRow = document.createElement('tr');

      const emptyCell = document.createElement('td');

      emptyCell.colSpan = 3;

      emptyCell.textContent = 'Keine Favoriten vorhanden';

      emptyRow.appendChild(emptyCell);

      tableBody.appendChild(emptyRow);

    }

  }

 

  // Rufe die Funktion zum Rendern der Favoriten-Tabelle auf

  renderFavoriten();

Vielen Dank im vorraus!

Answer 1

[regex9]

Wenn im Storage ein tatsächliches Array steckt (genauer gesagt, ein Array an Objekten):

[
  {
    titel: "TestArtikel1",
    autor: "Max Mustermann",
    url: "http://TestArtikel1.html",
    bild_url: "http://img/Artikelbild1.jpg"
  },
  /* etc. */
]

dann klappt das auch.