Passing and showcasing JSON information from one webpage to another upon clicking by utilizing local storage

I've been experimenting with a way to transfer JSON data from one page to another by using local storage.

For instance, when a user clicks on a specific book image, they are directed to book.html where the image and book name are displayed (retrieved from the json file).

FIGMA PROTOTYPE -

script.js

const petsData = [{
  name: "Story Book",
  species: "Jean Lumier", //THIS IS THE JSON FILE
  photo: "a.jpg"
},
{
  name: "Barksalot",
  species: "Dog",
  href:"href.img,
  photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
},

];

function petTemplate(pet) {
  
return `
<div class ="image-grid">
   <div class="animal">
   
    <img class="pet-photo " src="${pet.photo}" >
   
      
       <div class="olay" onclick="location.href='${pet.href}';" style="cursor: pointer;">
       <div id="mydiv">
  
      <h2 class="pet-name">${pet.name}
      
      
      <h1 class="species">${pet.species}

      </div>
       <div></div></div>
      </div>
   </div>

  
`;
}

Thank you for your time.

javascripthtmlcssjson

Answer №1

To showcase this concept, I have created a single page demo: https://stackblitz.com/edit/web-platform-uzc5rj

Given that your JSON data lacks unique identifiers, you can use the array index as a reference in your book.html link. For example:

<a href='book.html?book=1'><img of book /></a>

Subsequently, in the book.html file:

<div id='book_details'></div>
   <script>
let bookData = localStorage.getItem('bookData');
 bookData = JSON.parse(bookData)

    const urlParams = new URLSearchParams(window.location.search);
    const bookPos = urlParams.get('book');
    
   
      let book = bookData[bookPos]
      let bookHtml =  `
    <div class ="book-html">
    <h1>${book.name}  </h1>
    <p>${book.species} </p>
    </div>
    `;
    
    document.getElementById('book_details').innerHTML = bookHtml;
 
  </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to find the length of a word within a txt file using jQuery?

I'm facing an issue with parsing text from a file. The file in question can be accessed via the following link: File: google-books-common-words.txt [1] Word => 'THE' USED => 53097401461 [2] Word => 'OF' USED => 3096 ...

javascriptjquery

Decoding JSON Responses from Web Services Using PHP

Hello, I'm trying to work with JSON and web services for the first time. When I use the insert command, I receive the following data after using print_r($result): Array ( [error_code] => 0 [error_desc] => [result] => Array ( [error_code] =&g ...

phpjsonweb-servicesparsing

Utilizing the power of React and Flux alongside xhr for handling routing and caching

Questioning opinions and seeking validation on understanding Flux. In my quest to comprehend Flux with strictness, I delved into the realm of XHR calls, websockets, external stimuli, routing mechanisms, and more. Various resources such as articles, interv ...

javascriptreactjsreactjs-flux

I can't seem to figure out the source of this unexpected padding/margin on my website

After creating a website for a church using Foundation, SASS, and Compass, I noticed a horizontal scroll issue when resizing the window. Adding overflow-x: hidden; seemed to fix it, but there was still about 20px of padding on the right side when testing ...

csssasscompass-sasszurb-foundation

Utilizing JavaScript to assign class names to dynamically created elements from objects

I specialize in javascript and am working on adding the CSS class .is-slideUp to each card__item element created from a data object, in order to achieve a sliding-up animation effect. Although the .is-slideUp class name appears in the console, it does not ...

javascriptjsonaddeventlistener

Is it normal not to see </head> and <body> tags in the page source code?

Looking at the source code of the page, you'll find something like this: <link rel="stylesheet" href="http://..."> <!-- analytics --> <script> ... Make sure the closing </head> tag and the opening <body> tag are positio ...

html

Sending data to HTML using parameters in a .cshtml document

I encountered a situation where I had to deal with the following code snippet within a .cshtml file: var peopleList = $('#PeopleListTable').dataTable({ // not relevant "fnRender": function (oObj) { ...

javascriptjquery

Exploring Unpredictable Motion with HTML5 and Javascript

I am currently diving into the world of HTML5 game development. I want to create a ball that moves randomly on the screen, rather than following a predictable left to right motion. Unfortunately, my current code only allows the ball to move in a set patter ...

javascripthtmlgame-physics

The drop-down list unexpectedly closes at the most inconvenient moment

I am looking to create a search input with a drop-down list. The requirement is for the list to close when the focus or click is anywhere except the search input. I have added a function listClose() to the "blur" listener, but now I am unable to capture t ...

javascripthtmlcsstypeahead

Animating the navbar with CSS transitions

https://i.sstatic.net/cV3X6.png Seeking advice on adding a transition effect to my navbar. Specifically, I'd like to have a colored background appear below each link when hovered over. For example, when hovering over "HOME," a yellow color should dis ...

htmlcsstwitter-bootstrap

Seeking assistance with setting up BxSlider installation

I'm struggling with adding bxslider to my HTML template. No matter what I try, the slider doesn't work as expected. When I preview my website, all three images are displayed together in a single column. Can someone please guide me on how to fix t ...

javascriptjqueryhtmlcss

Create dynamic animations for HTML lists with seamless transitions

I am looking to create a smooth animation effect for an HTML list that moves from left to right and vice versa with a fixed length. The issue I am encountering is that when I click on the right button, it is replacing the list elements instead of animating ...

jqueryhtmlcsshtml-lists

Combining two sets of strings into a JSON structure using JAVA

I am facing a situation where I have two arrays at hand: String[] COLUMN_NAMES = { "id", "name", "status", "value", "code", "type" }; String[] Values = { "1", "Task", "Completed", "", "abc123", "random" }; The goal is to convert these arrays into a JSON ...

javajson

Positioning a div absolutely while still keeping the integrity of the page layout

I'm in the process of setting up a blog page on my website with a design that includes two columns. The first column, known as .col_1, is fixed in width and is showcased in red. The second column, represented by .col_2, occupies the remaining space an ...

htmlcss

The text within the button disappears when in the :before state

After implementing the code from this codepen, I decided to use the 3rd button design. .btn { line-height: 50px; height: 50px; text-align: center; width: 250px; cursor: pointer; } .btn-three { color: #FFF; transitio ...

htmlcssbuttonhover

Transmitting live video to rtmp using the client's web browser

Is it feasible to stream video from a client browser to an RTMP server without using Flash? I am searching for an alternative solution. https://github.com/ahyswang/actionscript-publisher I found this to be effective, but it relies on Flash. Do I need to ...

htmlflashwebrtcrtmp

Does the ngIf directive cause a re-evaluation of variables when used with one-time-binding in AngularJS?

I recently had a colleague at work demonstrate a peculiar quirk with one-time binding in Angular. Scenario: Imagine having an element with text being bound using one-time binding inside a block that is conditional on ng-if. If you update the value, say b ...

javascriptangularjs

Tips on adding an image using Reactjs

I am currently working in Reactjs with the Next.js framework. I am attempting to upload images using Axios (POST method API) and will be utilizing an "api in PHP". Could someone please guide me on how to achieve this? I have tried the code below, but it&ap ...

javascriptreactjsnext.js

Executing control with AngularJS when ng-change event occurs

When using AngularJS One interesting scenario I encountered is having a ng-change event on a text field and seeing the function being called correctly: <input type="text" ng-model="toggleState" ng-change="ToggleGroupVisiable()" data-rule"" /> The ...

javascriptangularjs

Tips for dynamically adding divs inside a parent div until its width and height are fully utilized

Background: At this moment, I am in the process of creating a webpage where users will input tile width & height along with floor width & height. The aim is to calculate the area of the floor, with tiles measured in inches and the floor input measured in f ...

javascriptjqueryhtmlcsstile