Question 43779 in Html Question posted in
Some basic documentation can be found here.

can I pass a 2D array from one page to another using JavaScript? – Html

I am new to javascript, and I am wondering if there are any ways to pass specific data when the user clicks on its item from the main page to the product page? – without using PHP or any other programming language other than Javascript.

I used sessionStorage but it dosen’t give me what I need.

For example, I want to pass the data when the user clicks on one of these items first pic
to this page
second page

Here is my code for the first page

/* start of fifth section codes*/
let bestDeals = 
[
  [
    "https://i.pinimg.com/564x/2e/e1/25/2ee125c44f55f9ba271eed224a410d33.jpg",
    "Men, Football kits",
    "Brazil 2022/23 Stadium Home",
    "199$",
    "250$",
  ],
  [
    "https://i.pinimg.com/564x/20/6f/d5/206fd5f2e097717eee5a8e0ae94030c6.jpg",
    "Men, Football kits",
    "Saudi Arabia 2022/23 Away Jersey",
    "110 $",
    "199 $",
  ],
  [
    "https://i.pinimg.com/564x/76/a8/79/76a879179757d3a9ad2c12bc24e7457a.jpg",
    "Men, Football kits",
    "Man City Football Kit",
    "90 $",
    "140 $",
  ],
  [
    "https://i.pinimg.com/564x/b5/15/ad/b515ad05493a2a3686f10d6d82cf6910.jpg",
    "Men, Football kits",
    "Real Madrid 19/20 Home Kit",
    "200 $",
    "300 $",
  ],
  [
    "https://i.pinimg.com/564x/35/06/5d/35065d3b1a55c8dd0ff604849ff4a6df.jpg",
    "Men, Football kits",
    "Real Madrid 19/20 Away Kit",
    "199 $",
    "250 $",
  ],

]

let fifthContainer = document.getElementById("fifth-section-container");

bestDeals.forEach(deal =>{
  fifthContainer.innerHTML = fifthContainer.innerHTML + 
  `
  <div id="fifth-section-card" class="fifth-section-card" >

  <div class="product-details">

      <img id="product-img" src="${deal[0]}" alt="">

      <span id="product-listing">
          ${deal[1]}
      </span>
     
      <h4 id="product-name" > ${deal[2]}</h4>
      <br>
      <div class="price-div">
          <div class="price-content">
              <span id="product-price scale-card">${deal[3]}</span>
              <span id="product-discount">${deal[4]}</span>
          </div>
          <div class="price-icons" >
              <i class="fa-regular fa-heart scale-card" style="color: black;"></i>
              <i class="fa fa-shopping-bag scale-card" style="color:black;"></i>
          </div>
      </div>
  </div>

  </div>
  `
})
let fifthCard = document.getElementsByClassName("fifth-section-card");
let isClicked = true;

document.querySelectorAll(".fifth-section-container .fifth-section-card").forEach(item =>{
  
  item.onclick = () =>{

    sessionStorage.setItem('img', bestDeals[item])
    window.open("productInfo.html" ,"_self") 
  }
})

I don’t have any codes in the second page as of right now.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    when I wrote some codes for my project, I came up with an idea that solved my problem. The idea was to loop through the cards, and then write a while loop and pass the data to the second page if the i equals the counter of the while loop..

    I hope it makes sense for you.

    Here is my solution:

    let bestDeals = 
[
  [
    "https://i.pinimg.com/564x/2e/e1/25/2ee125c44f55f9ba271eed224a410d33.jpg",
    "Men, Football kits",
    "Brazil 2022/23 Stadium Home",
    "199$",
    "250$",
  ],
  [
    "https://i.pinimg.com/564x/20/6f/d5/206fd5f2e097717eee5a8e0ae94030c6.jpg",
    "Men, Football kits",
    "Saudi Arabia 2022/23 Away Jersey",
    "110 $",
    "199 $",
  ],
  [
    "https://i.pinimg.com/564x/76/a8/79/76a879179757d3a9ad2c12bc24e7457a.jpg",
    "Men, Football kits",
    "Man City Football Kit",
    "90 $",
    "140 $",
  ],
  [
    "https://i.pinimg.com/564x/b5/15/ad/b515ad05493a2a3686f10d6d82cf6910.jpg",
    "Men, Football kits",
    "Real Madrid 19/20 Home Kit",
    "200 $",
    "300 $",
  ],
  [
    "https://i.pinimg.com/564x/35/06/5d/35065d3b1a55c8dd0ff604849ff4a6df.jpg",
    "Men, Football kits",
    "Real Madrid 19/20 Away Kit",
    "199 $",
    "250 $",
  ],

]

let fifthCard = document.getElementsByClassName("fifth-section-card");
var counter = 0;
for (let i = 0; i < fifthCard.length; i++){
  fifthCard[i].onclick = function() {
    while( counter < fifthCard.length){
      if (i === counter){
        sessionStorage.setItem('data',JSON.stringify(bestDeals[counter]) )
      }

      counter++
    }
    
    window.open("productInfo.html" ,"_self" )
    sessionStorage.clear
  }

}

    and to recive the data on the second page:

    P.C if the data you trying to pass is an array item just do as the code below.

    let data = JSON.parse(sessionStorage.getItem('data'));
    img.src = data[0]
    title.innerHTML = data[2]
    priceDiv.style.display = "flex"
    newPriceTag.innerHTML = "New Price:"
    oldPrice.innerHTML = data[4]
    newPrice.innerHTML = data[3]
    category.innerHTML = data[1]
    console.log(data)


  2. 0

    As Jack wrote in the comments, it is worth trying to solve this issue with a good framework.

    Nonetheless, you can use sessionStorage but only with strings. So a solution could be to store your data in JSON format (which is a string):

    sessionStorage.setItem('img', JSON.stringify(bestDeals[item]))

    and then if you want to retrieve the data, use:

    let originalData = JSON.parse(sessionStorage.getItem('img'))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search