es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo buscar elementos en propiedades de matriz

24 Jul, 2023 Programación

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:
imagen de consola y 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?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 array allItems. Debería ser for (let count = 0; count < allItems.length; count++). Segundo, hay un error de sintaxis en la concatenación de cadenas en la instrucción console.log(). Los signos + deberían ser reemplazados por comas. Debería ser console.log(titleOfItem, 'fizz') en lugar de console.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 propiedades title, desc y elem, entonces es posible buscar directamente en el objeto items sin crear un array adicional allItems. Una forma de hacer esto es la siguiente:

    function search() {
  let keyword = document.getElementById('keywordText').value;
  for (let key in items) {
    let titleOfItem = items[key].title;
    if (titleOfItem.includes(keyword)) {
      console.log(titleOfItem, 'fizz');
    } else {
      console.log(titleOfItem, 'buzz');
    }
  }
}

    Este código recorre cada clave en el objeto items y verifica si el title de ese elemento incluye la keyword. Si es así, registra el title con fizz. De lo contrario, lo registra con buzz.

Comments are closed.