Iterate over an array of objects to gather and accumulate the information stored within them

Question

Iterate over an array of objects to gather and accumulate the information stored within them

I am working with an array that is retrieved from my database, which contains objects. This array includes hours, employee IDs, and a list of employees on the web page. My goal is to display the number of hours assigned to a specific employee when clicking on their name.

var makeup_hrs = api_resp.makeup_data[key];

for (var i = 0; i < makeup_hrs.length; i++) {
  var obj = makeup_hrs[i];
  console.log(obj);
  for (var o in obj) {
    var y = obj[o];
    console.log("make up hours ", y, "id: ", emp_id)

    var x = document.getElementById("makeUpHours").innerHTML = y;
    console.log(x);

    // $('#makeUpHours').html(y);
  }
}

Although I am able to successfully retrieve the number of hours assigned to each employee along with their ID through console logs, I am facing an issue with displaying this information via innerHTML. It only displays the last hours value rather than matching it to a specific employee.

The console output shows data for two employees currently stored in my database:

 make up hours  4 id:  2891
make up hours  7 id:  1978

Below is the relevant HTML code within a Bootstrap modal where the hours information should be displayed:

<div class="form-group">   <label class="col-sm-3"> Hours </label> 
  &nbsp;<span id="makeUpHours"></span></div>

A modal window pops up when an icon is clicked, with each icon corresponding to a specific employee ID.

https://i.sstatic.net/0cL6V.jpg

https://i.sstatic.net/D4XHw.jpg

https://i.sstatic.net/AZAIN.jpg

The correlation between employee IDs and hours is correctly established when these values are logged together.

javascript arrays loops

Answer 1

Answer №1

It is important to note that in each iteration, you are replacing the content of innerHTML instead of adding to it. This means that only the result of the last iteration will be visible.

Consider this alternative approach:

// example data
const employees = [{
  name: 'Alice',
  hours: 8
}, {
  name: 'Mike',
  hours: 12
}, {
  name: 'Sarah',
  hours: 16
}]

const ul = document.getElementById('staff')

// format employee information
const stringifyData = staffMember => `${staffMember.name}: ${staffMember.hours} hours`

// insert employee HTML 
const addStaffMember = text => {
  ul.innerHTML += `<li>${text}</li>`
}

// loop through the array
employees.map(stringifyData).forEach(addStaffMember)

<ul id="staff"></ul>

I personally recommend separating data manipulation from DOM modifications for easier testing purposes, but you can combine both steps within a single iteration if needed.

Answer 2

It is important to note that in each iteration, you are replacing the content of innerHTML instead of adding to it. This means that only the result of the last iteration will be visible.

Consider this alternative approach:

// example data
const employees = [{
  name: 'Alice',
  hours: 8
}, {
  name: 'Mike',
  hours: 12
}, {
  name: 'Sarah',
  hours: 16
}]

const ul = document.getElementById('staff')

// format employee information
const stringifyData = staffMember => `${staffMember.name}: ${staffMember.hours} hours`

// insert employee HTML 
const addStaffMember = text => {
  ul.innerHTML += `<li>${text}</li>`
}

// loop through the array
employees.map(stringifyData).forEach(addStaffMember)

<ul id="staff"></ul>

I personally recommend separating data manipulation from DOM modifications for easier testing purposes, but you can combine both steps within a single iteration if needed.

Answer 3

Answer №2

To gain a deeper understanding of the issue at hand, let's delve into some theoretical concepts. It is crucial to comprehend the underlying problem in order to effectively discover a solution.

Imagine you have an array of objects:

[{
  id: 1,
  x: 10,
}, {
  id: 2,
  x: 20,
}, {
  id: 3,
  x: 30,
}];

You aim to generate the following HTML markup for insertion into the innerHTML property of any DOM element:

<p>id: 1, x: 10</p>
<p>id: 2, x: 20</p>
<p>id: 3, x: 30</p>

(note that there is no common parent element, as this is valid for innerHTML manipulation)

You could iterate through the array of objects using a for loop, then access the properties of each object with another nested for loop. To achieve this, accumulate the desired result outside the scope of these loops but within the function responsible for changing the innerHTML of the target element. Here's a basic implementation:

let result = '';

for (let i = 0; i < array.length; i++) {
  result += `<p>id: ${array[i].id}, x: ${array[i].x}</p>`;
}

element.innerHTML = result;

An alternative approach commonly used in the Javascript community involves leveraging map and reduce functions on collections of similar elements. Implementing this approach would simplify your code to:

element.innerHTML = array.reduce((total, current) => `${total}<p>id: ${current.id}, x: ${current.x}</p>`, '');

While this may appear complex at first glance, it achieves the same outcome efficiently.

Lastly, keep in mind that when concatenating strings, use +=; when replacing its value entirely, utilize =.

Answer 4

To gain a deeper understanding of the issue at hand, let's delve into some theoretical concepts. It is crucial to comprehend the underlying problem in order to effectively discover a solution.

Imagine you have an array of objects:

[{
  id: 1,
  x: 10,
}, {
  id: 2,
  x: 20,
}, {
  id: 3,
  x: 30,
}];

You aim to generate the following HTML markup for insertion into the innerHTML property of any DOM element:

<p>id: 1, x: 10</p>
<p>id: 2, x: 20</p>
<p>id: 3, x: 30</p>

(note that there is no common parent element, as this is valid for innerHTML manipulation)

You could iterate through the array of objects using a for loop, then access the properties of each object with another nested for loop. To achieve this, accumulate the desired result outside the scope of these loops but within the function responsible for changing the innerHTML of the target element. Here's a basic implementation:

let result = '';

for (let i = 0; i < array.length; i++) {
  result += `<p>id: ${array[i].id}, x: ${array[i].x}</p>`;
}

element.innerHTML = result;

An alternative approach commonly used in the Javascript community involves leveraging map and reduce functions on collections of similar elements. Implementing this approach would simplify your code to:

element.innerHTML = array.reduce((total, current) => `${total}<p>id: ${current.id}, x: ${current.x}</p>`, '');

While this may appear complex at first glance, it achieves the same outcome efficiently.

Lastly, keep in mind that when concatenating strings, use +=; when replacing its value entirely, utilize =.

Iterate over an array of objects to gather and accumulate the information stored within them

Answer №1

Answer №2

Similar questions

Issue with div element not stretching to 100% width

Steps to deactivate two choices in a multi-select dropdown menu and visually dim those options

Retrieve JSON information via AJAX

Utilize Protractor Selenium to extract content from a popup window

Which JavaScript library or template engine would be most suitable for this scenario?

I am having trouble getting my website to work offline using caching

The anchor tag is failing to register when placed inside a dynamically created table cell

Is there a way to mimic this type of scrolling effect?

Stop unauthorized access to PHP files by utilizing AJAX

problem with the video pathway in the javascript document

Utilizing PHP to iterate through an array of MySQL data

Displaying an alert message when incorrect login credentials are detected in React Native

How can I send back multiple error messages from a pug template in a node.js application with Express?

Combine two arrays at unpredictable locations

Achieving Dynamic Center Alignment of Filtered Node in SVG Using D3

Troubleshooting: JSColor Is Failing to Function Properly in Volusion's

When I adjust the page size, the navbar stays hidden after clicking

Is it possible in Angular JS to only load a service in the specific JS file where it is needed, rather than in the app.js file

Tips for efficiently showcasing array responses in Vue.js and Laravel

Achieving Full Height for Parallel Columns Divs with Bootstrap - A How-To Guide