Guide on utilizing the reduce method with objects

Question

Guide on utilizing the reduce method with objects

I am attempting to use the reduce method on an object to create an HTML list

const dropdownTemplate = (data) => {
console.log(data); // no data displayed
return `
<li class="dropdown__item" data-value="${data.value}"><span class="dropdown__itemCode">${data.code}</span> <span class="dropdown__itemText">${data.name}</span></li>
`;
};

const data_obj = JSON.parse('[ { "type": "hotel", "value": 25, "name":"Hotel name", "code": "sn", "lat" : "1.3", "long" : "1.33" } ]');
const fetched_items = data_obj.reduce((item, generated) => {
generated += dropdownTemplate(item);
return generated;
}, '');
console.log(fetched_items); // always contains undefined values

However, I can't figure out why the item is always empty (resulting in a list with undefined values).

What mistake am I making here?

javascript object reduce

Answer 1

Answer №1

In my opinion, you have mixed up the usage of item and generated.

generated actually refers to the element that is retained from one iteration to the next loop, while item pertains to the element in the array that is being processed in the current loop.

const dataObj = JSON.parse('[ { "value": 25, "name":"Hotel name", "code": "sn"  }, { "value": 30, "name2":"Hotel name2", "code": "sn2" } ]');

const dropdownTemplate = data => `<li class="dropdown__item" data-value="${data.value}"><span class="dropdown__itemCode">${data.code}</span> <span class="dropdown__itemText">${data.name}</span></li>\n\n`;

const fetchedItems = dataObj.reduce((tmp, x) => `${tmp}${dropdownTemplate(x)}`, '');

console.log(fetchedItems);

Answer 2

In my opinion, you have mixed up the usage of item and generated.

generated actually refers to the element that is retained from one iteration to the next loop, while item pertains to the element in the array that is being processed in the current loop.

const dataObj = JSON.parse('[ { "value": 25, "name":"Hotel name", "code": "sn"  }, { "value": 30, "name2":"Hotel name2", "code": "sn2" } ]');

const dropdownTemplate = data => `<li class="dropdown__item" data-value="${data.value}"><span class="dropdown__itemCode">${data.code}</span> <span class="dropdown__itemText">${data.name}</span></li>\n\n`;

const fetchedItems = dataObj.reduce((tmp, x) => `${tmp}${dropdownTemplate(x)}`, '');

console.log(fetchedItems);

Answer 3

Answer №2

For optimal performance in this type of situation, it is recommended to utilize a map function.

The structure for reduce params looks like this: (aggregate, item) => {}

const dropdownTemplate = (data) => {
return `
    <li class="dropdown__item" data-value="${data.value}">
    <span class="dropdown__itemCode">${data.code}</span> <span class="dropdown__itemText">${data.name}</span>
    </li>`;
 };

const data_obj = JSON.parse('[ { "type": "hotel", "value": 25, "name":"Hotel 
name", "code": "sn", "lat" : "1.3", "long" : "1.33" } ]');

const fetched_items = data_obj.reduce((combinedHtml, item) => {
   combinedHtml += dropdownTemplate(item);
   return combinedHtml;
}, '');

console.log(fetched_items);

Answer 4

For optimal performance in this type of situation, it is recommended to utilize a map function.

The structure for reduce params looks like this: (aggregate, item) => {}

const dropdownTemplate = (data) => {
return `
    <li class="dropdown__item" data-value="${data.value}">
    <span class="dropdown__itemCode">${data.code}</span> <span class="dropdown__itemText">${data.name}</span>
    </li>`;
 };

const data_obj = JSON.parse('[ { "type": "hotel", "value": 25, "name":"Hotel 
name", "code": "sn", "lat" : "1.3", "long" : "1.33" } ]');

const fetched_items = data_obj.reduce((combinedHtml, item) => {
   combinedHtml += dropdownTemplate(item);
   return combinedHtml;
}, '');

console.log(fetched_items);

Guide on utilizing the reduce method with objects

Answer №1

Answer №2

Similar questions

The React Apexchart fails to correctly adjust its height based on its parent container when set to 100%

After refreshing in FireFox, the "disabled" attribute of the button fails to function

What steps can I take to ensure that my Onetrust consent script is properly loaded before implementing Facebook pixel tracking in NextJS?

Having trouble executing javascript with Ext.Ajax in Sencha-Touch2?

Tips for stopping links in iOS web applications from launching in a new Safari tab

Easily visualize the JSON object hierarchy within Eclipse using JavaScript

Is it possible to eliminate the default placeholder text from Safari browser?

Maximizing efficiency in processing multiple requests simultaneously using ajaxSetup's data

Adjust the size of an element using the jQuery library's knob.js

Ways to refine date results using JavaScript

The Angular MatStepper is unable to detect saved values from two string arrays, although it is able to detect values from a different string array

Is it possible to arrange a react map based on the length of strings?

Implementing Default Language in Next.js 14 for Static Export without URL Prefix: A Step-by-Step Guide

Ensure the item chosen is displayed on a single line, not two

Troubleshooting issue with multer code failing to save files in designated directory within nodejs server when using reactjs frontend

In what way does ReactJS enable me to utilize constant functions before they are declared?

default radio option with pre-selected value

Angular JS failing to display error messages

Apollo-Server presents errors in a polished manner

HTML - implementing a login system without the use of PHP