javascript - 如何在对象上使用 reduce

Question

我正在尝试使用 reduce 循环对象以生成 html 列表

const dropdownTemplate = (data) => {
	console.log(data);  // always empty
	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); // allways filled with undefined values

但无法理解为什么项目总是空的(所以它生成了未定义值的列表)，

我做错了什么？

Answer 1

我想你颠倒了 item 和 generated。

generated 是从一个循环到另一个循环保留的元素；和 item 在实际循环中处理的数组元素。

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);