Tengo algunos json, ejemplo a continuación:
[ { "category": { "name": "Technology", "key": "012" } }, { "category": { "name": "Kitchen", "key": "016" } }, { "category": { "name": "Technology", "key": "012" } } ]Quiero contar las ocurrencias de los datos y mapearlas para crear una lista en un componente de reacción. Quiero mostrar, el nombre, la clave y las ocurrencias que aparecen en la lista. Y quiero mostrar solo 1 instancia del elemento con sus ocurrencias en la lista. Quiero usar Lodash para lograr esto.
// Example 1 - Lists each category with the correct values. eg. Technology(012,2), Kitchen(016,1), Technology(012,2). const categories = items.map( item => item.category ) const countCategories = countBy(categories) // React Component { Object.keys(categories).map(category => <CustomComponent category={category.name} key={category.key} count={countCategories[category.name]} /> // Example 2 - Lists only one instance of each unique category by name with the count but not the key. eg. Technology(,2), Kitchen(,1) const categories = items.map( item => item.category.name ) const countCategories = countBy(categories) // React Component { Object.keys(countCategories).map(category => <CustomComponent category={category} key={'NA'} count={countCategories[category]} /> )} El resultado deseado que estoy buscando es enumerar solo una instancia de cada categoría en la lista, con el nombre, el recuento y la clave. Parece que solo puedo contar las apariciones de .name o .key lo que a su vez significa que no puedo incluir el otro en mi mapa. ¿Cómo puedo lograr esto usando Lodash?
Usando Array#reduce , itere sobre la lista mientras actualiza un Map donde la clave es el nombre de la categoría y el valor es la categoría con el conteo actualizado.
El resultado serían los valores finales del Mapa que son las categorías agrupadas por el name , cada una con el count final:
const arr = [ { "category": { "name": "Technology", "key": "012" } }, { "category": { "name": "Kitchen", "key": "016" } }, { "category": { "name": "Technology", "key": "012" } } ]; const res = [... arr.reduce((categoryMap, { category }) => { if(categoryMap.has(category.name)) { categoryMap.get(category.name).count++; } else { categoryMap.set(category.name, {...category, count: 1}); } return categoryMap; }, new Map) .values() ]; console.log(res);Con lodash puede usar _.groupBy() para agrupar elementos por category.name y luego mapear los grupos y crear una matriz de categorías con el conteo:
const arr = [ { "category": { "name": "Technology", "key": "012" } }, { "category": { "name": "Kitchen", "key": "016" } }, { "category": { "name": "Technology", "key": "012" } } ]; const result = _.map( _.groupBy(arr, 'category.name'), items => ({ ...items[0].category, count: items.length }) ) console.log(result); <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>