Struggling to successfully pass data between pages using JSON

I'm currently working on HTML code for a view cart page where I display an item name. My goal is to be able to transfer this data, along with others later on, to a different HTML page that will automatically generate a list of multiple items with prices and calculate the total price.

<div class="product-name-options">
            <!--START: itemnamelink--><a id="itemName" href="product.asp?itemid=[ITEM_CATALOGID]">[ITEM_NAME]</a><!--END: itemnamelink-->

<button type="button" onclick="window.location='Quote_ep_78-1.html'" id="vc_ChkButton" class="btn"><i class="icon-basket"></i> Get Quote</button>

</div>

On the cart page, I have the following JSON code.

       <script>
     jQuery( document ).ready(function($) {

    var itemName = document.getElementById('itemName');

if(typeof(Storage)!=="undefined")
  {
var me = {name: itemName};
localStorage.setItem("user",JSON.stringify(me));
  }
else
  {
  // Sorry! No Web Storage support..
  }


});


    </script>

Here's the quote page code.

<script>

jQuery( document ).ready(function($) {

console.log(localStorage.getItem("user"));

});

     /*document.write("Quantity = " + localStorage.getItem("user") + "<br>");*/

    </script>

 <div id="add">




    </div>

 </head>

<body>


    <div id = ".myDivClass">




    </div>



   </body>

I'm running into issues displaying the JSON data in the div I created. Currently, my console.log command outputs "{"name":{}}", which I believe reflects the number of items in my cart but I am unable to display anything else. This is my first time working with JSON so I am struggling a bit, but I am eager to learn and expand on this so I can effectively print out multiple items on the page.

Answer №1

const product = document.getElementById('product');

The 'product' variable represents an HTML element, specifically an anchor tag in this instance. The purpose of transferring data to another page is unclear. However, one possible solution is to encapsulate the data in an object and store it in the local storage. To save the text content of the anchor tag in the local storage, you can use the following code snippet.

const item = {name: product.textContent};
localStorage.setItem("user", JSON.stringify(item));

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

Conceal rows in the table until the search (filterBy) is completed

Currently, I am utilizing Vue.js version 1.x and plan to update soon. My requirement is to have a table of rows containing some data. To filter the table rows using filterBy, I am using a Vue.js component. However, I want the table rows to remain hidden un ...

Ways to identify if one object is positioned above another

So, here's the scenario: I'm trying to figure out how to detect when one element is positioned on top of another. Specifically, I'm dealing with SVG elements: <circle r="210.56" fill="#1ABCDB" id="01" priority="4" cx="658" cy="386">& ...

Tips for placing a div within a curved div?

I've got a nested div situation, <div style="background-color: red; height: 100px; width: 100px; border-radius: 10px;" id="div1"> <div style="background-color: orange;" id="div2"> testing </div> </div ...

Search through a JSON object, identify all keys that start with the same letter, and transfer them to a new JSON data structure

I am looking to iterate through my JSON data and extract all keys along with their values that start with the letters "QM". Below is an example of my JSON content: [ { MHF46: 'Ledig', MHF181: '06', QM6_QMSI2: '1899-12-30 ...

In a Vue component, use JavaScript to assign the data property in object 2 to object 1 when their keys match

Could use some assistance here as I believe I'm getting close to a solution, I have a form object that needs updating based on matching keys with an imported object. For example, form.title should be set to the value in article.title. I've att ...

Display data in Highchart legend only if it has values

In a unique scenario, I am required to compare various items and display the results in a chart. The user inputs two, three, or four article IDs and receives the corresponding data displayed in a chart. The issue arises when the user enters only two or th ...

Transferring data from a text area to a table with AngularJS

Creating a C# MVC App with AngularJS My goal is to populate a table with values entered in a text area using Angular. Here is the process: Users input values into a text area like this: A B C When a user clicks a button, a modal window should open and ...

Displaying form after Ajax submission

I have implemented an AJAX code to submit my form, but I am facing an issue where the form disappears after submission. Here is my current code: <script> $('#reg-form').submit(function(e){ e.preventDefault(); // Prevent Default Submissi ...

What is the process for uploading an image using fetch?

After just starting to learn react, I decided to create a gallery App. However, I am facing an issue when trying to post pictures to the API. Whenever I click on the ADD button, nothing happens except for an error 500 being logged in the console. Below is ...

Designate material for a particular table header element

Is there a method to pass content within a td-element to a specific th-element? I am working with a dynamic table and need to associate the content correctly under each table header. I have implemented pagination for the rows in the table. Currently, all ...

Simple steps to access a feature on an AngularJS application

I have my angular application stored in a variable (initialized with:) var app = angular.module('app', [...]); Now, I need to access the $timeout service. How can I retrieve this service from it? I am looking for something like: var timeout ...

Unable to locate module with React and Material-UI integration

When attempting to implement a Material button in my React app, I encountered the following error: Failed to compile. ./node_modules/@material-ui/core/styles/index.js Module not found: Can't resolve '/Users/hugovillalobos/Documents/Code/Lumiere ...

Setting the selected option of a select form element dynamically in Vue 3

Is there a way to dynamically set the selected option in Vue 3 when the data value doesn't match any available option value? Situation: If Florida (FL) is the stored state value and the country changes from United States (US) to Canada (CA), the Sta ...

Exploring the JSON Structure in NodeJS

My current json array is structured in the following way: [{"id": 1, "meeting": "1/3/2015 12:30:00 PM", "name": "John"}, {"id": 1, "meeting": "1/3/2015 13:30:00 PM"}, "name": "John"}, {"id": 2, "meeting": "1/5/2015 7:00:00 AM"}, "name": "Peter"}, {"id": 2 ...

Identifying when a user closes a tab or browser to trigger a logout in JavaScript with Vue.js using the Quasar framework

Is there a way to trigger the logout function only when the tab or browser is closed, and not when the page is refreshed? I attempted the following code example, which successfully triggers the logout on tab close but also logs out when the page is ref ...

react-swiper does not trigger a re-render

function WorkSpace() { const dispatch = useDispatch(); const edit = useSelector((state)=>(state.workSpace.edit)); const currentMode = useSelector((state)=>(state.workSpace.currentMode)); useEffect(()=>{ const swiper = docu ...

Check if the provided arguments in JavaScript are arrays and, if they are, combine them into a single large array

My array variables are as follows: const gumBrands = ['orbit', 'trident', 'chiclet', 'strident']; const mintBrands = ['altoids', 'certs', 'breath savers', 'tic tac']; Presen ...

jQuery - Password Validation

I need help using jQuery to validate two password fields against each other. Below is the code snippet I am currently using: jQuery('#settingsForm').validate( rules : { npassword : { }, pass_check : { equ ...

Tips on how child component can detect when the object passed from parent component has been updated in Angular

In the child component, I am receiving an object from the parent component that looks like this: { attribute: 'aaaa', attribute2: [ { value }, { value }, { value }, ] } This object is passed to th ...

Is the npm mqtt module continuously running but not performing any tasks?

I'm relatively new to the world of JS, node.js, and npm. I am attempting to incorporate a mqtt broker into a project for one of my classes. To gain a better understanding of how it functions, I installed the mqtt module from npm. However, when I tried ...