如何使用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);