मैं प्रतिक्रिया सीख रहा हूं और यह पता लगाने की कोशिश कर रहा हूं कि मैं श्रेणियों के आधार पर किसी सरणी को कैसे फ़िल्टर कर सकता हूं।
मैं जिस डेटा के साथ काम कर रहा हूं वह यहां कुछ ऐसा है: http://www.mocky.io/v2/5c2bd5683000006900abaff9
तो मैं इसका उपयोग करके सभी श्रेणियों को फ़िल्टर करने में सक्षम हूं:
getTheCats() {
const cats = [...new Set(this.getVehicleData().map(v => v.category))];
const catsR = cats.filter(c => c).map((category, i) => {
// console.log(this.props.vehicle);
return (
<Col
xs="12"
key={i}
onClick={() => this.getCategories(category)}
className={
this.state.category === category
? 'border-bottom p-15 active'
: 'border-bottom p-15 not-active'
}
>
<FontAwesomeIcon
icon={this.state.active ? faMinusCircle : faPlusCircle}
/>
<h5 className=""> {category} </h5>
<SpecsDetails
key={this.props.vehicle.id}
vehicle={this.props.vehicle}
/>
</Col>
);
});
return (
<Row className="deal-details__specs accoridon-heading" id="specs">
{catsR}
</Row>
);
}
यह मुझे मेरी सभी व्यक्तिगत श्रेणियां देता है। लेकिन अब मुझे इन सभी को एक समझौते में लाने की जरूरत है। तो श्रेणी वास्तव में अकॉर्डियन का शीर्षक है। मैं प्रत्येक श्रेणी से मेल खाने वाले सभी डेटा कैसे प्राप्त कर सकता हूं?
2 जवाब
आप प्रत्येक श्रेणी के लिए मानों की एक सरणी के साथ, श्रेणियों का एक ऑब्जेक्ट प्राप्त करने के लिए groupBy का उपयोग कर सकते हैं। इसके बाद आप इसे toPairs और map के साथ zipObject का उपयोग करके, वस्तुओं पर श्रेणी की एक सरणी में परिवर्तित कर सकते हैं:
const { pipe, groupBy, prop, toPairs, map, zipObj, dissoc } = R;
const groupByCategories = pipe(
groupBy(prop('category')),
map(map(dissoc('category'))), // optional - if you want to remove the category from the values
toPairs,
map(zipObj(['category', 'values']))
)
const data = [{"label":"Remote trunk/hatch release","category":"Comfort & Convenience","value":"Remote control trunk/hatch release"},{"label":"Cruise control","category":"Comfort & Convenience","value":"Included"},{"label":"Cargo area light","category":"Comfort & Convenience","value":"Included"},{"label":"Computer","category":"Comfort & Convenience","value":"Trip computer: includes average fuel economy and range for remaining fuel"},{"label":"Headlight control","category":"Comfort & Convenience","value":"Headlight control with dusk sensor"},{"label":"Power locks","category":"Comfort & Convenience","value":"Card key power locks ; automatic locking"},{"label":"Ventilation system","category":"Comfort & Convenience","value":"Ventilation system with micro filter"},{"label":"Secondary ventilation controls","category":"Comfort & Convenience","value":"Passenger ventilation controls"},{"label":"Air conditioning","category":"Comfort & Convenience","value":"Dual-zone climate control"},{"label":"Power windows","category":"Comfort & Convenience","value":"Front windows with one-touch on two windows, rear windows"},{"label":"Spare wheel","category":"Comfort & Convenience","value":"Included"},{"label":"Compass","category":"Comfort & Convenience","value":"Included"},{"label":"Smart card / smart key","category":"Comfort & Convenience","value":"Keyless Enter ‘n Go™ smart card/smart key with keyless entry"},{"label":"Vehicle start button","category":"Comfort & Convenience","value":"Included"},{"label":"External","category":"Dimensions","value":"L: 189.8, W: 76.5 - H: 69.3"},{"label":"Cargo area dimensions","category":"Dimensions","value":"Cargo area dimensions: loading floor height (inches): 32.4"},{"label":"Weight","category":"Dimensions","value":"6,500 (lbs)"},{"label":"Engine","category":"Engine","value":"3.6 v6 V"},{"label":"Fuel system","category":"Engine","value":"Multi-point fuel injection"},{"label":"Fuel Type","category":"Engine","value":"unleaded"}]
const result = groupByCategories(data)
console.log(result)<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.min.js"></script>आप वास्तव में इसे कुछ ऑब्जेक्ट ट्रिक्स के साथ प्राप्त कर सकते हैं
let categories = {};
this.getVehicleData().map(vehicle => {
categories[vehicle.category] = categories[vehicle.category] || []
categories[vehicle.category].push(vehicle)
})
आप मूल्यों तक पहुंच सकते हैं
Object.keys(categories).map(category => {
console.log('category', category)
console.log('values', categories[category])
})
आशा है कि यह काम करता है :)