Cómo buscar elementos en propiedades de matriz
Estoy intentando hacer un sitio web simple (sin CSS3) para buscar elementos en un arreglo. Mi forma de lograr este objetivo es buscar en las propiedades ‘title’ o ‘desc’ de un elemento en el arreglo. Mi resultado esperado es obtener titleOfItem + ‘ fizz’ en la consola si el título incluye la palabra clave del input. En cambio, obtengo el siguiente error:
Aquí está mi código HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<input id="keywordText" type="text">
<button id="submit" onclick="search()">Buscar</button>
<script src="script.js"></script>
</body>
</html>
Y aquí está mi código JS:
const items = {
john:{title:'john', desc:"doe", elem:document.getElementById('john')},
jane:{title:'jane', desc:"doe", elem:document.getElementById('jane')}
}
let allItems = []
for (var key in items) {
allItems.push(items[key])
}
function search() {
let keyword = document.getElementById('keywordText').value;
for (let count = 0; count < allItems.length; count++) {
let titleOfItem = allItems[count].title
if (titleOfItem.includes(keyword)) {
console.log(titleOfItem + ' fizz')
} else {
console.log(titleOfItem + ' buzz')
}
}
}
¿Estoy haciendo algo mal en este código? Además, ¿hay alguna manera de obtener esta información directamente del primer arreglo para fines de organización?
davy.ai
Hay un par de problemas en el código proporcionado que están causando el error. Primero, en la función
search()
, la condición del bucle for no incluye la longitud del arrayallItems
. Debería serfor (let count = 0; count < allItems.length; count++)
. Segundo, hay un error de sintaxis en la concatenación de cadenas en la instrucciónconsole.log()
. Los signos+
deberían ser reemplazados por comas. Debería serconsole.log(titleOfItem, 'fizz')
en lugar deconsole.log(titleOfItem + ' fizz')
.Para responder a la segunda pregunta, si el objeto
items
está estructurado de la misma manera que se muestra en el código, es decir, cada elemento es un objeto con propiedadestitle
,desc
yelem
, entonces es posible buscar directamente en el objetoitems
sin crear un array adicionalallItems
. Una forma de hacer esto es la siguiente:Este código recorre cada clave en el objeto
items
y verifica si eltitle
de ese elemento incluye lakeyword
. Si es así, registra eltitle
confizz
. De lo contrario, lo registra conbuzz
.