通過3個數組進行過濾以對數據進行排序

我正在研究一個項目，讓我們根據所選標籤對項目進行排序。這裏是我一直卡在的問題：通過3個數組進行過濾以對數據進行排序

我有一個項目的數組。每個項目都是具有標籤屬性的對象。 tags屬性是與該項目相關的標籤數組。

有一個下拉組件讓你選擇你想縮小結果的標籤。您可以一次選擇多個標籤。下拉列表是一組標籤。除了基於所選標籤呈現項目之外，我已經可以工作了。

的示例數據（存儲在終極版）：

const obj = { 

const items = [ 
    { id: 1, name: "car", tags: ["technology", "vehicle"] }, 
    {id: 2, name: "bike", tags: ["outdoors"] } 
] 

const dropdownValues = ["vehicle","indoor","technology", "outdoors"]}

下面的代碼使我的所有項目到頁面上。

{data.filter((item) => item.tags.map(tag => tag == tagsArray.map(tagArr => tagArr))

如何我只能渲染標籤的項目中選擇：

class ItemCardList extends Component{ 
    render(){ 
     let data = this.props.itemsData; //this is all of the items data 
     let tags = this.props.tags; //these are the selected dropdown tags stored in redux 
     return (
      <Masonry> 
       {data.map((item) => { 
        return <div><ItemCard key={item.id} item={item}/></div> 
       })} 
      </Masonry> 
     ) 
    } 
} 

const mapStateToProps = state => ({ 
    tags: state.items.tags, 
    itemsData: state.items.itemsData, 
}); 
export default connect(mapStateToProps)(ItemCardList);

我的想法沿此線（我知道是真是混亂）去？我是否在說這個？有更好的方法嗎？

請讓我知道如果有反正我可以更好地解釋這個問題。謝謝！

來源

2017-10-17 Jean-Marie Dalmasso

我建議使用Array.filter()，Array.some()和Array.includes()這裏：

//tells us whether a tag should be shown 
const isTagVisible = tag => this.props.tags.includes(tag); 

//tells us whether an item has any tags that should be shown 
const doesItemHaveAnyVisibleTags = item => item.tags.some(isTagVisible); 

//filters only items that have any tags that should be shown 
const filteredItems = items.filter(doesItemHaveAnyVisibleTags);

來源

2017-10-17 22:50:17

正是我需要的。謝謝鄧肯！ –

沒問題！祝你的項目好運！ –

如何

items.filter(
    item => item.tags.some(
     tag => yourDropdownList.indexOf(tag) !== -1 
    ) 
)

這將返回所有包含選定標籤的項目。

來源

2017-10-17 22:42:20

問題說，有可能是由用戶選擇多個標籤。 –

更新了片段。 –

這是一個很好的答案。 –

通過3個數組進行過濾以對數據進行排序

回答

相關問題