Estoy generando un menú desplegable y me gustaría que cada opción del menú desplegable esté etiquetada con dos cadenas (nombre del producto y nombre de la empresa) y tenga un número de serie como atributo de valor. Cada uno de estos se obtiene de JSON (contenido en una variable llamada list ).
Aquí hay un registro de muestra del JSON:
[ { 'code': '01234567', 'company': 'SAMPLE COMPANY', 'name': 'SAMPLE PRODUCT' } ]Esto debería presentarse en el HTML así:
<option value="01234567">SAMPLE PRODUCT [SAMPLE COMPANY]</option>
Mi Javascript es el siguiente:
for (let i = 0; i < l; i++) { var opt = document.createElement("OPTION"); opt.setAttribute("value", list[i]["code"]); var product = list[i]["name"]; var company = list[i]["company"]; opt.innerHTML = product.concat(" [", company, "]"); } Sin embargo, esto falla con "Error de tipo no detectado: product.concat no es una función". Revisé el tipo de datos para product y la company y ambos son cadenas en todos los casos.
¿Qué más podría estar causando este tipo de error?
// product is string type, just join them with "+" // concat is a method of array type opt.innerHTML = product + " [" + company + "]"; // tempalte string in ES6 opt.innerHTML = `${product} [${company}]`;Puede usar la plantilla literal como
opt.innerHTML = `${product} [${company}]`; const list = [{ 'code': '01234567', 'company': 'SAMPLE COMPANY', 'name': 'SAMPLE PRODUCT' }] for (let i = 0; i < list.length; i++) { var opt = document.createElement("OPTION"); opt.setAttribute("value", list[i]["code"]); var product = list[i]["name"]; var company = list[i]["company"]; opt.innerHTML = `${product} [${company}]`; document.body.appendChild(opt) }