Guide to utilizing various Nodelists using the forEach function

Question

Guide to utilizing various Nodelists using the forEach function

I'm currently developing an online store project that includes a shopping cart feature. My goal is to send a POST request to the server with the items selected by the user in the cart. I have initialized an empty array and I have 3 Nodelists containing product information. What I aim to do is extract their values, text content, and dataset properties, then nest them all within my empty array like this:

var products = { Lines: [ ] };

This is what I have attempted so far:

const prName = this.parentNode.parentNode.querySelectorAll('.product-name-link');
const prInput = this.parentNode.parentNode.querySelectorAll('.product-quantity-input');
const prPrice = this.parentNode.parentNode.querySelectorAll('.product-price-total');

prName.forEach(product => products.push(product.dataset.id))
prInput.forEach(product => products.Lines.push(product.value))
prPrice.forEach(product => products.Lines.push(product.textContent))

The desired outcome should resemble something like this:

"Lines":[
    {
     "Assortiment":"1627aea5-8e0a-4371-9022-9b504344e724",
     "Quantity":12678967.543233,
     "SalePrice":12678967.543233,
     "Warehouse":"1627aea5-8e0a-4371-9022-9b504344e724"
    },
    {
     "Assortiment":"1627aea5-8e0a-4371-9022-9b504344e724",
     "Quantity":12678967.543233,
     "SalePrice":12678967.543233,
     "Warehouse":"1627aea5-8e0a-4371-9022-9b504344e724"
    },
    {
     "Assortiment":"1627aea5-8e0a-4371-9022-9b504344e724",
     "Quantity":12678967.543233,
     "SalePrice":12678967.543233,
     "Warehouse":"1627aea5-8e0a-4371-9022-9b504344e724"
    }
    ],

javascript arrays json foreach

Answer 1

Answer №1

After carefully considering the various points raised in the comments, a potential solution could be structured like this:

const inventory = { Items: [] };

const itemName = this.parentNode.parentNode.querySelectorAll('.item-name-link');
const itemQuantity = this.parentNode.parentNode.querySelectorAll('.item-quantity-input');
const itemPrice = this.parentNode.parentNode.querySelectorAll('.item-price-total');

// Iterate through each item to create a product entry...
itemName.forEach((element, index) => inventory.Items.push({
  Name: element.dataset.id,
  Quantity: itemQuantity.item(index).value,
  Price: itemPrice.item(index).textContent
}));

Answer 2

After carefully considering the various points raised in the comments, a potential solution could be structured like this:

const inventory = { Items: [] };

const itemName = this.parentNode.parentNode.querySelectorAll('.item-name-link');
const itemQuantity = this.parentNode.parentNode.querySelectorAll('.item-quantity-input');
const itemPrice = this.parentNode.parentNode.querySelectorAll('.item-price-total');

// Iterate through each item to create a product entry...
itemName.forEach((element, index) => inventory.Items.push({
  Name: element.dataset.id,
  Quantity: itemQuantity.item(index).value,
  Price: itemPrice.item(index).textContent
}));

Answer 3

Answer №2

Enclose the elements using Array.from() like this:

Array.from(elements).forEach( function(item) {
    console.log(item);
});

Answer 4

Enclose the elements using Array.from() like this:

Array.from(elements).forEach( function(item) {
    console.log(item);
});

Guide to utilizing various Nodelists using the forEach function

Answer №1

Answer №2

Similar questions

Using character variables as input for functions in R with the Tidyjson package

Using JavaScript and HTML to show the current month, date, and year on a webpage

Using Vue.js to share events and data across various components

Storing a reference to children generated by a function within a child prop

Using a variable as a parameter when requesting a value from a JSON object in JavaScript

I have implemented a button in PHP and now I am looking to invoke a function when that button is clicked

Developing a JSON structure from a series of lists

Passing data from a parent node to a child node using JavaScript and the D3.js library

Can a static text be displayed randomly using Javascript?

Encourage users to activate the physical web feature in compatible web browsers

Upgrade your function to utilize Firebase V9 with Next.js framework

Using <span> tags to wrap sentences within <p> tags while maintaining the rest of the HTML formatting

Is the use of addEventListener("load",... creating an excessive number of XmlHttpRequests?

The disappearance of a Python numpy mask when assigning an array to another array

Iterate through the JSON data values using a loop and showcase each one by presenting them in individual cards

I am unable to transfer information retrieved from the fetch call to the express API

Creating dynamic variable names in Jquery by combining strings and numbers

The latest value has replaced the state's previous value

Utilizing an SSL certification (pem file) within JavaScript

Parsing JSON data using Newtonsoft.Json library to convert it into a List collection with named entries