Je souhaite filtrer ce tableau de données en tableaux d'état et de villes. Comment puis-je atteindre cet objectif en utilisant lodash ou toute autre méthode plus efficace plutôt que de créer une boucle et de conserver des tableaux supplémentaires.
data: [
{ id: 1, name: Mike, city: philps, state: New York},
{ id: 2, name: Steve, city: Square, state: Chicago},
{ id: 3, name: Jhon, city: market, state: New York},
{ id: 4, name: philps, city: booket, state: Texas},
{ id: 5, name: smith, city: brookfield, state: Florida},
{ id: 6, name: Broom, city: old street, state: Florida},
]
quel utilisateur clique sur state
, la liste d'état apparaît.
{state: New York, count: 2},
{state: Texas, count: 1},
{state: Florida, count: 2},
{state: Chicago, count: 1},
Lorsque l'utilisateur clique sur un état particulier, la liste de cities
de cet état apparaît. Par ex. lorsque l'utilisateur clique sur l'état de New York,
{id:1, name: Mike, city: philps}
{id:3, name: Jhon, city: market}
Avec lodash, vous pouvez utiliser _.filter
avec un objet comme _.matches
iteratee raccourci pour filtrer l’objet avec une paire clé/valeur donnée et
utilisez _.countBy
avec _.map
pour obtenir le nombre d'états.
var data = [{ id: 1, name: 'Mike', city: 'philps', state: 'New York' }, { id: 2, name: 'Steve', city: 'Square', state: 'Chicago' }, { id: 3, name: 'Jhon', city: 'market', state: 'New York' }, { id: 4, name: 'philps', city: 'booket', state: 'Texas' }, { id: 5, name: 'smith', city: 'brookfield', state: 'Florida' }, { id: 6, name: 'Broom', city: 'old street', state: 'Florida' }];
console.log(_.filter(data, { state: 'New York' }));
console.log(_
.chain(data)
.countBy('state')
.map((count, state) => ({ state, count }))
.value()
);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
Vous pouvez le faire en utilisant native
javascript en appliquant la méthode filter
qui accepte en tant que paramètre a callback
la fonction fournie.
let data= [ { id: 1, name: 'Mike', city: 'philps', state:'New York'}, { id: 2, name: 'Steve', city: 'Square', state: 'Chicago'}, { id: 3, name: 'Jhon', city: 'market', state: 'New York'}, { id: 4, name: 'philps', city: 'booket', state: 'Texas'}, { id: 5, name: 'smith', city: 'brookfield', state: 'Florida'}, { id: 6, name: 'Broom', city: 'old street', state: 'Florida'}, ]
data = data.filter(function(item){
return item.state == 'New York';
}).map(function({id, name, city}){
return {id, name, city};
});
console.log(data);
Une autre approche consiste à utiliser les fonctions arrow
.
let data= [ { id: 1, name: 'Mike', city: 'philps', state:'New York'}, { id: 2, name: 'Steve', city: 'Square', state: 'Chicago'}, { id: 3, name: 'Jhon', city: 'market', state: 'New York'}, { id: 4, name: 'philps', city: 'booket', state: 'Texas'}, { id: 5, name: 'smith', city: 'brookfield', state: 'Florida'}, { id: 6, name: 'Broom', city: 'old street', state: 'Florida'}, ]
data = data.filter((item) => item.state == 'New York').map(({id, name, city}) => ({id, name, city}));
console.log(data);
Ceci est assez simple en utilisant Array.prototype.filter
, Array.prototype.map
, Array.prototype.reduce
et la déstructuration:
//filter by particular state
const state = /*the given state*/;
const filtered = data
.filter(e => e.state == state)//filter to only keep elements from the same state
.map(e => {
const {id, name, city} = e;
return {id, name, city};
});//only keep the desired data ie id, name and city
//get states array
const states = data
.reduce((acc, elem) => {
const state_names = acc.map(e => e.state);//get all registered names
if(state_names.includes(elem.state)){//if it is already there
const index = acc.find(e => e.state==elem.state);
acc[index] = {state: acc[index].state, count: acc[index].count+1};//increment it's count
return acc;
}else//otherwise
return [...acc, {state: elem.state, count: 1}];//create it
}, []);
cf this jsfiddle pour le voir en action.
Il suffit de suivre la fonction de filtre Par exemple
return data.filter(data => data.state == "New York" && count === 2);