Iterate over the items stored in localStorage and display a particular value when clicked

Question

Iterate over the items stored in localStorage and display a particular value when clicked

For my library project, I am trying to create a shopping cart feature. The issue I'm facing is that when I click on a specific book, I cannot add it to another localStorage.

This is my html    <!--Knjige-->
<div class="container grid" id='knjige'></div>

This is my CSS:

.container{
    margin: 50px;   }

  .grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px;
    align-items: start;   }

  .grid-card{
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    background: orange;
    z-index: 9;   }

  .text:hover{
    color: #fff;
    cursor: pointer;   }

  .text{
    padding: 0 20px 20px;
    color: black;
    font-weight: bold;   }

And this is my JavaScript, please note that I'm not allowed to use jQuery

let knjige = [

    {"Naziv":"4_50 From Paddington_ A Miss Marple Mystery",
    "ID":"XA7JORPL",
    "Autor":"Agatha Christie",
    "Godina":"2007",
    "Cena":546,
    "Raspolozivo_stanje":50,
    },

    {"Naziv":"Lord Edgware Dies (1986, Berkley)",
    "ID":"BPL6QUG5",
    "Autor":"Agatha Christie",
    "Godina":"1986",
    "Cena":1041.06,
    "Raspolozivo_stanje":15,
    },

    {"Naziv":"Murder at the Vicarage  (2000, Signet)",
    "ID":"T2CGKTQQ",
    "Autor":"Agatha Christie",
    "Godina":"2000",
    "Cena":546,
    "Raspolozivo_stanje":44,
    },

    {"Naziv":"Sparkling Cyanide (1989)",
    "ID":"1QIFZZ4P",
    "Autor":"Agatha Christie",
    "Godina":"1989",
    "Cena":1114.91,
    "Raspolozivo_stanje":45,
    },

    {"Naziv":"The Mystery of the Blue Train",
    "ID":"4C4XW7H2",
    "Autor":"Agatha Christie",
    "Godina":"1928",
    "Cena":1041.06,
    "Raspolozivo_stanje":"",
    }
    ];

    if(!localStorage.getItem('knjige')){
        window.localStorage.setItem('knjige', JSON.stringify(knjige));
    }

    let knjigeLocalStorage = JSON.parse(window.localStorage.getItem('knjige'));

    window.onload = function(show){
        for(knjiga of knjigeLocalStorage){
            show += `
                <div class='grid-card'>
                    <div class='text'>
                        <h4>Title: ${knjiga.Naziv}</h4>
                        <p>Author: ${knjiga.Autor}</p>
                        <p>ID: ${knjiga.ID}</p>
                        <p>Year: ${knjiga.Godina}</p>
                        <p>Price: ${knjiga.Cena}</p>
                        <p>Available Quantity: ${knjiga.Raspolozivo_stanje}</p>
                        <button class='btn' id='dugme' onclick=''><i class="fas fa-shopping-cart"></i></button>
                    </div>
                </div>
            `;
        };
        document.getElementById('knjige').innerHTML = show;
    };

I want to display the value of the specific book when the button is clicked. Hope I explained it clearly..

Thanks!

javascript arrays json object local-storage

Answer 1

Answer №1

You need to correct a value here:
```
for(knjiga of knjigeLocalStorage){
```
Using innerHTML can cause issues with onclick events and HTML rendering.

I personally prefer using addEventListener and adding elements through the DOM. It may be considered old-fashioned, but it works well.

document.addEventListener("DOMContentLoaded", (event) => {
    const div = document.getElementById('knjige');

    knjigeLocalStorage.forEach((k) => {

    const d = document.createElement("div");
    d.classList.add("grid-card");
    const text = document.createElement("div");
    text.classList.add("text");
    const h4 = document.createElement("h4");
    h4.innerHTML = `Naziv ${k.Naziv}`;
    const button = document.createElement("button");
    const i = document.createElement("i");
    i.classList.add("fas", "fa-shopping-cart");
    button.appendChild(i);

    button.addEventListener("click", () => {

        alert(`Naziv ${k.Naziv}`);

    });


    text.append(h4);
    text.append(button);
    d.appendChild(text);
    div.appendChild(d);
  });

});

Give this fiddle a try:

https://jsfiddle.net/2cor9v1w/

document.addEventListener("DOMContentLoaded") Does not work as expected with JSFiddle, so you might need it in your actual code instead of window.onload.

Answer 2

You need to correct a value here:
```
for(knjiga of knjigeLocalStorage){
```
Using innerHTML can cause issues with onclick events and HTML rendering.

I personally prefer using addEventListener and adding elements through the DOM. It may be considered old-fashioned, but it works well.

document.addEventListener("DOMContentLoaded", (event) => {
    const div = document.getElementById('knjige');

    knjigeLocalStorage.forEach((k) => {

    const d = document.createElement("div");
    d.classList.add("grid-card");
    const text = document.createElement("div");
    text.classList.add("text");
    const h4 = document.createElement("h4");
    h4.innerHTML = `Naziv ${k.Naziv}`;
    const button = document.createElement("button");
    const i = document.createElement("i");
    i.classList.add("fas", "fa-shopping-cart");
    button.appendChild(i);

    button.addEventListener("click", () => {

        alert(`Naziv ${k.Naziv}`);

    });


    text.append(h4);
    text.append(button);
    d.appendChild(text);
    div.appendChild(d);
  });

});

Give this fiddle a try:

https://jsfiddle.net/2cor9v1w/

document.addEventListener("DOMContentLoaded") Does not work as expected with JSFiddle, so you might need it in your actual code instead of window.onload.

Iterate over the items stored in localStorage and display a particular value when clicked

Answer №1

Similar questions

Utilizing a Struct-based Array in a Function to Populate Array with Data from a File

Is it possible to use the ""get" prefix for a function in Spring Boot?

Ways to retrieve the pending count of XMLHttpRequests in JavaScript

When a string begins with the "<" character, jQuery regex is unable to find a match

Can regex matching characters be made easier to understand?

I am in the process of transforming my basic JS Array into one that contains key/value

Using Stringify to modify the value of a particular array in Local Storage

Remove a div element with Javascript when a button is clicked

Troubleshoot: React and Laravel login authentication issues

Sending an array of objects to a MySQL database using React and NodeJS: A comprehensive guide

Is the dataType: "json" parameter necessary in AJAX requests under certain conditions?

An issue occurred while deploying Docker on Railway services: Build Error

Bringing joy to a JS library: Embracing both Node and the Window

Issue with alert not appearing after webpage is refreshed or reloaded on Angular v10

Should I package my dependencies with webpack for production builds?

Guide on incorporating an Ajax spinner to a Slideshow

Is there a way to specifically execute a Mongoose validate function solely for the create user page and not the edit user page?

Using PHP to identify a unique pattern within a hostname

Is it possible to utilize custom CSS to conceal commas and evade a JSX bug?

Enhancing Struts2 JSON Plugin: Including ActionMessages, ActionErrors, and FieldErrors in the response