Tengo una variedad de perfiles.
Cada elemento de la matriz tiene una matriz de etiquetas.
p.ej. devs = [ { name: "John", skills: ["react", "javascript"]}, { name: "Jane", skills: ["HTML", "javascript"]} ]
Primero quiero crear una matriz de todas las habilidades únicas.
Luego, quiero filtrar la matriz de desarrolladores de acuerdo con las habilidades que selecciono. Quiero mapear esa matriz de habilidades únicas como botones, y cuando se hace clic en un botón, filtrar la matriz de desarrolladores mapeada.
const devs = [ { name: "John", skills: ["react", "javascript"]}, { name: "Jane", skills: ["HTML", "javascript"]} ]; const allSkills = //Need all unique values from devs.skills const [filters, setFilters] = useState([]); return ( <> Filter: {allSkills.map((skill) => <button onClick=() => setFilters(??)>{skill}</button>)} {devs.map((dev) => <p>{dev.name} Skills: {dev.skills.map((skill) => <span>{skill}</span>)} </p>))} //need to filter this based on filters </> )Está en un componente React, lo llevé lo más lejos que pude.
Entonces, para obtener una variedad de habilidades únicas, puede usar el operador de distribución con concat y Set y luego puede usar el método de filter para obtener desarrolladores según la habilidad seleccionada.
const devs = [{ name: "John", skills: ["react", "javascript"] }, { name: "Jane", skills: ["HTML", "javascript"] } ]; const skills = Array.from(new Set([].concat(...devs.map(({ skills }) => skills)))) const filterBySkill = (skill) => { return devs .filter(({ skills }) => skills.includes(skill)) .map(({ name }) => name) } console.log(filterBySkill('javascript')) console.log(filterBySkill('react')) console.log(skills)Para obtener una lista de habilidades únicas, puede usar Set en combinación con el map por ejemplo
let uniqueSkills = new Set(devs.map(x=> x.skills).flat());Entonces, si desea filtrar su matriz inicial, podría usar algo como esto:
let filteredList = devs.filter(x=> x.skills.includes(word)); donde word es una cadena o una variable que contiene una cadena con habilidad concreta para encontrar.
Otra alternativa a la otra respuesta si no desea crear un Set y convertirlo nuevamente en una matriz, usando flat y reduce :
const devs = [ { name: "John", skills: ["react", "javascript"]}, { name: "Jane", skills: ["HTML", "javascript"]} ]; const allSkills = devs.map(dev => dev.skills).flat().reduce( (arr, val) => { if (!arr.includes(val)) arr.push(val); return arr }, [] ) console.log(allSkills)