Exploring the contents of variables within the forEach iteration

Question

Exploring the contents of variables within the forEach iteration

One issue I've encountered involves accessing variables from a forEach loop that iterates over an array of objects, and trying to use those variables outside the loop. I attempted to declare variables and assign them values from the loop, but I found that it only returned the first value.

let bestPrice;
let injectInstruments;
allInstruments.forEach(function (instrument) {
    
    let price = instrument.price;
    let type = instrument.type;
    let description = instrument.description;
    let picture = instrument.picture;
   
     injectInstruments =instrumentsContainer.innerHTML= `<div  hidden 
    instrumentType='${type}'class="box instrument" price="${price}">
        <img class="instrument-image" src="${picture}" alt="">
       <h6 class="price">${price}</h6>
        <p class="instrument-description">${description}</p>
    </div>`
   bestPrice=price
})
console.log(injectInstruments);
console.log(bestPrice);

javascript arrays foreach

Answer 1

Answer №1

Problem

bestPrice gets overwritten in each iteration.
instrumentsContainer.innerHTML is also overwritten in each loop.
There is no need to call injectInstruments to insert HTML as using .innerHTML = '' will suffice.

The line

injectInstruments = instrumentsContainer.innerHTML='<div ...>'

contains three equals signs, causing a syntax error.

Resolution

Consider using .insertAdjacentHTML() instead of .innerHTML. The former adds HTML content to a container, while the latter replaces the entire container's content.
If the goal is to only access prices, store them in an array.

// Obtain the container <div>
const instrumentsContainer = document.querySelector('div');

const allInstruments = [{
    price: 100,
    type: 'something',
    description: 'lorem ipsum',
    picture: './image1.jpg'
  },
  {
    price: 200,
    type: 'something2',
    description: 'lorem ipsum2',
    picture: './image2.jpg'
  },
];

// Array to store prices
let bestPrices = [];
  
function myFunction() {
  allInstruments.forEach(function(instrument) {

    let price = instrument.price;
    let type = instrument.type;
    let description = instrument.description;
    let picture = instrument.picture;

    // HTML content
    let html = `<div instrumentType='${type}' class="box instrument" price="${price}">
        <img class="instrument-image" src="${picture}" alt="${picture}">
       <h6 class="price">${price}</h6>
        <p class="instrument-description">${description}</p>
    </div>`;

    // Insert the generated HTML at the end of the <div>
    instrumentsContainer.insertAdjacentHTML('beforeend', html);

    // Add the price to the array
    bestPrices.push(price);
  });
}

// Call myFunction();
myFunction();

// Check the array of best prices
console.log(bestPrices);

<div></div>

I personally believe that storing prices in an array is not necessary. If the aim is to find the lowest price, you can achieve this like so:

const allInstruments = [{
    price: 100,
    type: 'something',
    description: 'lorem ipsum',
    picture: './image1.jpg'
  },
  {
    price: 200,
    type: 'something2',
    description: 'lorem ipsum2',
    picture: './image2.jpg'
  },
];

let bestPrice = Math.min(...allInstruments.map(e => e.price));

console.log(bestPrice)

Answer 2

Problem

bestPrice gets overwritten in each iteration.
instrumentsContainer.innerHTML is also overwritten in each loop.
There is no need to call injectInstruments to insert HTML as using .innerHTML = '' will suffice.

The line

injectInstruments = instrumentsContainer.innerHTML='<div ...>'

contains three equals signs, causing a syntax error.

Resolution

Consider using .insertAdjacentHTML() instead of .innerHTML. The former adds HTML content to a container, while the latter replaces the entire container's content.
If the goal is to only access prices, store them in an array.

// Obtain the container <div>
const instrumentsContainer = document.querySelector('div');

const allInstruments = [{
    price: 100,
    type: 'something',
    description: 'lorem ipsum',
    picture: './image1.jpg'
  },
  {
    price: 200,
    type: 'something2',
    description: 'lorem ipsum2',
    picture: './image2.jpg'
  },
];

// Array to store prices
let bestPrices = [];
  
function myFunction() {
  allInstruments.forEach(function(instrument) {

    let price = instrument.price;
    let type = instrument.type;
    let description = instrument.description;
    let picture = instrument.picture;

    // HTML content
    let html = `<div instrumentType='${type}' class="box instrument" price="${price}">
        <img class="instrument-image" src="${picture}" alt="${picture}">
       <h6 class="price">${price}</h6>
        <p class="instrument-description">${description}</p>
    </div>`;

    // Insert the generated HTML at the end of the <div>
    instrumentsContainer.insertAdjacentHTML('beforeend', html);

    // Add the price to the array
    bestPrices.push(price);
  });
}

// Call myFunction();
myFunction();

// Check the array of best prices
console.log(bestPrices);

<div></div>

I personally believe that storing prices in an array is not necessary. If the aim is to find the lowest price, you can achieve this like so:

const allInstruments = [{
    price: 100,
    type: 'something',
    description: 'lorem ipsum',
    picture: './image1.jpg'
  },
  {
    price: 200,
    type: 'something2',
    description: 'lorem ipsum2',
    picture: './image2.jpg'
  },
];

let bestPrice = Math.min(...allInstruments.map(e => e.price));

console.log(bestPrice)

Answer 3

Answer №2

The fluctuating values of bestPrice and injectInstrument are due to their constant change within each loop iteration. To address this issue, consider storing the values in a string array and utilize a debugging method such as iterating through loops to track and monitor the changes.

Answer 4

The fluctuating values of bestPrice and injectInstrument are due to their constant change within each loop iteration. To address this issue, consider storing the values in a string array and utilize a debugging method such as iterating through loops to track and monitor the changes.

Exploring the contents of variables within the forEach iteration

Answer №1

Problem

Resolution

Answer №2

Similar questions

Need to invoke a controller method multiple times? Utilize AJAX for seamless and efficient execution

Specify the controller to be used dynamically in an Angular directive

Ajax encountered a problem while attempting to download the file

Errors are thrown when utilizing hydration with RTK Query

The distinction between storing data and component data becomes apparent when using Vuex in conjunction with a persisted state

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

What is the best way to extract the image url from a page in WordPress?

The pagination feature is malfunctioning and is displaying all elements on every page instead of correctly displaying a

The array exceeded the integer limit when conducting a bitwise left shift operation

What is the best approach to passing multiple variables to a JavaScript function in HTML/PHP?

The complete rendering of angular-google-maps is only achieved after resizing the browser

Retrieving JavaScript return values in a C# WebBrowser control within a WPF application

How can I avoid C3.js legends from overlapping when hiding or showing a div?

Ways in which elements can be toggled through jquery or javascript?

Sending a parameter to a form within Edge Animate

Is there a way to display a different file, such as index.html, based on the screen width?

Issues Persist with Bootstrap Tree View - object passed but no output显示

Identifying repeated numbers and displaying the one that occurs most frequently at the top, followed by the remaining

Square-shaped arch chart utilizing Highcharts library

AngularJS Upgrading the Scope with $q