如何在React Native中过滤对象数组？

Question

我想将这个数据数组过滤成州和城市数组。除了使用for循环并维护额外的数组之外，如何使用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},

用户点击特定州时，该州的城市列表将出现。例如，当用户点击纽约州时，

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

- Balasubramanian

---

可能是在JavaScript对象数组上进行groupby的最有效方法是什么？的重复问题。 - bennygenel

Answer 1

你可以使用原生JavaScript 通过应用接受 参数 的回调函数 提供的filter方法来实现此操作。

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

另一种方法是使用箭头函数。

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

- Mihai Alexandru-Ionut

---

我有一个数组对象中的空值。如何删除并需要使用这些值。在这里需要显示除空值之外的所有内容。让数据 = [ { id: , name: '', city: '', state:''},{ 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'}, ]数据 = 数据.filter((item) => item.state == 'New York').map(({id, name, city}) => ({id, name, city}));console.log(数据); - sejn

let data = [ { id: , name: '', city: '', state:''},{ 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); - Zeeshan Ali

你们有没有意识到这在模拟器或实际设备上都不起作用？我觉得这个问题就是为了这个目的而构建的。 - Manny Alvarado

你们意识到这在模拟器或实际设备上都不起作用吗？我觉得这个问题就是为了这个目的而构建的。 - undefined

Answer 2

使用lodash，您可以将_.filter与对象一起使用，作为_.matches 迭代器简写 ，以过滤具有给定键/值对的对象，并使用_.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((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>

- Nina Scholz

---

对于状态计数，它将数据数组作为结果打印出来。 - Balasubramanian

输出与片段中显示的完全正确。但我没有得到相同的结果。 - Balasubramanian

对于第二个控制台。将数据作为结果获取 - Balasubramanian

你可以添加 value() 方法来获取没有 lodash 方法的渲染结果。 - Nina Scholz

Answer 3

只需按照过滤函数即可，例如：

For Example

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

- Saad Mirza

Answer 4

使用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
}, []);

访问这个jsfiddle链接，以查看其操作方式。

- Vivick