如何篩選反應本機中的對象數組？

我想過濾這個數據數組到狀態和城市數組。我如何使用lodash或其他更好的方式來實現這一點，而不是循環和維護額外的數組。如何篩選反應本機中的對象數組？

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

哪個用戶點擊state，出現狀態列表。

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

當用戶點擊特定狀態時，出現該狀態的cities列表。例如。當用戶點擊紐約州，

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

來源

2017-10-21 Balasubramanian

的可能的複製[什麼是GROUPBY對象的JavaScript的陣列上的最有效的方法？（https://stackoverflow.com/questions/14446511/what-is-the對於狀態計數，它的打印輸出數據數組是最有效的方法到對象上的一組javascript- – bennygenel

隨着lodash，你可以使用_.filter與對象爲_.matches iteratee速記與給定的鍵/值對和

使用_.countBy與_.map用於獲取狀態的計數過濾的對象。

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((v, k) => ({ state: k, count: v })) 
 
    .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>

來源

2017-10-21 12:57:22

。 – Balasubramanian

輸出與sinppet中的顯示完全一致。但我不一樣。 – Balasubramanian

對於第二個控制檯。作爲結果獲取數據 – Balasubramanian

可以使用JavaScript的native應用filter方法，其作爲參數callback提供的功能做到這一點。

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(item){ 
 
    delete item.state; 
 
    return item; 
 
}); 
 
console.log(data);

來源

2017-10-21 12:00:04

這是相當簡單的使用Array.prototype.filter，Array.prototype.map，Array.prototype.reduce和解構：

//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看到它在行動。

來源

2017-10-21 12:25:03 Vivick

如何篩選反應本機中的對象數組？

回答

相關問題