使用 lodash react js 过滤带有数组值的嵌套数据答案

【问题标题】：Filter nested data with array vales using lodash react js使用 lodash react js 过滤带有数组值的嵌套数据
【发布时间】：2019-08-16 10:44:08
【问题描述】：

考虑这个例子。我正在使用Lodash

"data": {
    “places”: [
                {
            place: 1,
            place name: ‘123’
            location: [ 
                {
                    location_id: 1,
                    location_name: ‘xyz’
                },
                {
                    location_id: 2,
                    location_name: ‘abc’
                },
                {
                    location_id: 3,
                    location_name: ‘etc’
                },
            ]
        }, 
        {
            place: 2,
            place name: ‘456’
            location: [ 
                {
                    location_id: 1,
                    location_name: ‘xyz’
                },
                {
                    location_id: 3,
                    location_name: ‘abc’
                },
                {
                    location_id: 4,
                    location_name: ‘etc’
                },
            ]
        } ,
        {
            place: 3,
            place name: ‘123’
            location: [ 
                {
                    location_id: 5,
                    location_name: ‘xyz’
                },
                {
                    location_id: 6,
                    location_name: ‘abc’
                },
                {
                    location_id: 2,
                    location_name: ‘etc’
                },
            ]
        }   ]
}

如果只有一个id要过滤，我想用location_id过滤上面的数据

var filterplaces = _.filter(data.places,{ location: [{ location_id: this.state.selectedLocationId}] });

它返回正确的过滤器数据。知道问题是当有多个 location_id 时，我应该如何传递数组数据来过滤记录。假设 selectedLocationId 将是具有 locationid [2,5] 的数组。

任何帮助表示赞赏提前致谢。

【问题讨论】：

标签： javascript reactjs lodash

【解决方案1】：

你可以不用lodash做到这一点：

data.places.forEach(element => 
     element.location.filter(obj => required_ids.indexOf(obj.location_id) > -1).length
     && filterplaces.push(element)
);

var data = {
  "places": [{
      place: 1,
      place_name: "123",
      location: [{
          location_id: 1,
          location_name: "xyz"
        },
        {
          location_id: 2,
          location_name: "abc"
        },
        {
          location_id: 3,
          location_name: "etc"
        },
      ]
    },
    {
      place: 2,
      place_name: "456",
      location: [{
          location_id: 1,
          location_name: "xyz"
        },
        {
          location_id: 3,
          location_name: "abc"
        },
        {
          location_id: 4,
          location_name: "etc"
        },
      ]
    },
    {
      place: 3,
      place_name: "123",
      location: [{
          location_id: 5,
          location_name: "xyz"
        },
        {
          location_id: 6,
          location_name: "abc"
        },
        {
          location_id: 2,
          location_name: "etc"
        },
      ]
    }
  ]
};

let required_ids = [1, 2];
var filterplaces = [];
data.places.forEach(element => element.location.filter(obj => required_ids.indexOf(obj.location_id) > -1).length && filterplaces.push(element));

console.log(filterplaces);

也可以使用some()：

filteredPlaces = data.places.filter(element => element.location.some((obj => required_ids.indexOf(obj.location_id) > -1)));

【讨论】：

shrys 其返回的匹配位置我想要完整的包含所需位置 ID 的位置对象。
const filteredPlaces = data.places.filter(element => element.location.some(/* */)); 会更高效、更清晰。

【解决方案2】：

你可以使用a function as your predicate instead of shorthand iteratee:

var filterplaces = _.filter(data.places, function(place) {
  return this.state.selectedLocationIds.indexOf(place.location.location_id) >= 0;
});

希望对你有帮助

【讨论】：

【解决方案3】：

遍历集合的元素，返回所有元素的数组，谓词返回truthy for。谓词使用三个参数调用：（值、索引|键、集合）。注意：与 _.remove 不同，此方法返回一个新数组。

var filter = _.filter(data.places, function(p) {
  if (p.length === 1) {
// write logic to return true or not if locaion is onnly 1
} else {
// write logic for more than 1 location id 
}
});

https://lodash.com/docs/#filter 更多详情

【讨论】：