it-swarm.com.de

Wie filtere ich ein Array von Objekten in "native"?

Ich möchte dieses Datenfeld nach Bundesland und Stadtfeld filtern. Wie kann ich dies mit lodash oder einem anderen besseren Weg erreichen, als mit Loop und zusätzlichen Arrays.

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},
]

welcher Benutzer auf state klickt, wird eine Statusliste angezeigt.

{state: New York, count: 2},
{state: Texas, count: 1},
{state: Florida, count: 2},
{state: Chicago, count: 1},

Wenn der Benutzer auf einen bestimmten Status klickt, wird eine Liste mit cities dieses Status angezeigt. Für ex. wenn der Benutzer auf den Bundesstaat New York klickt,

{id:1, name: Mike, city: philps}
{id:3, name: Jhon, city: market}
5
Balasubramanian

Mit lodash können Sie _.filter mit einem Objekt als _.matches iteratee shorthand verwenden, um das Objekt mit einem bestimmten Schlüssel/Wert-Paar und zu filtern

verwenden Sie _.countBy mit _.map , um eine Anzahl von Zuständen zu erhalten.

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>

3
Nina Scholz

Sie können dies mit native javascript tun, indem Sie die filter-Methode anwenden, die als parameter eine callback-Funktion akzeptiert.

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);

Ein anderer Ansatz ist die Verwendung von arrow-Funktionen.

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);

Dies ist ziemlich einfach mit Array.prototype.filter, Array.prototype.map, Array.prototype.reduce und der Destrukturierung:

//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 diese jsfiddle um es in Aktion zu sehen. 

4
Vivick

Folgen Sie einfach der Filterfunktion Zum Beispiel 

return data.filter(data => data.state == "New York" && count === 2);
2
Saad Mirza