Tengo un JSON como este:
[ { "title": "film1", "actor": ["jack", "fred"] }, { "title": "film2", "actor": ["jack", "tom"] }, { "title": "film3", "actor": ["albert", "luke"] } ]Hay un elemento de entrada donde el usuario puede buscar dentro de este JSON. Cuando el usuario escribe una cadena, la aplicación debe devolver una lista de los campos de " título " correspondientes.
Ejemplo: El usuario escribe " jack ". La aplicación debería devolver:
- film1 - film2Porque la cadena "jack" solo está en la matriz " actor " de film1 y film2 .
¿Cómo codifico esto? Creo que debería usar Object.values y Array.prototype.reduce() pero no estoy seguro de cómo hacerlo.
prueba esto
var actor = "jack"; var films = []; actors.forEach((item) => { if (item.actor.includes(actor)) films.push(item.title); }); console.log(films);Uso de métodos de matriz de JavaScript
Use Array.filter y Array.map y Array.some para una solución de una línea. Para que la búsqueda no distinga entre mayúsculas y minúsculas, también debemos convertir tanto la palabra clave como el nombre del actor a mayúsculas antes de realizar la comparación.
films.filter(p => p.actor.some(name => name.toUpperCase() === keyword)).map(p => p.title);Ejecute el fragmento para comprender cómo funciona
let films = [ { "title": "film1", "actor": ["jack", "fred"] }, { "title": "film2", "actor": ["jack", "tom"] }, { "title": "film3", "actor": ["albert", "luke"] } ]; search.onchange = function(e) { let keyword = (search.value || "").trim().toUpperCase(); let result = films.filter(p => p.actor.some(name => name.toUpperCase() === keyword)).map(p => p.title); if (!result.length) result.push("No matches"); output.innerHTML = "<li>" + result.join("</li><li>") + "</li>"; } search.onchange(); <p>Enter a keyword and press enter:</p> <input id="search" type="text" value="Jack"> <ul id="output"></ul>