Mixing
How can I filter an array based on a category in react?
1
I'm learning React and trying to figure out how I can filter an array based on categories.
The data I'm working with is something like this here:
http://www.mocky.io/v2/5c2bd5683000006900abaff9
So I'm able to filter out all of the categories using this:
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>
);
}
This gives me all of my individual categories. But what I need to do now is get all of these into an accordion. So the category is actually the heading of the accordion. How can I get all of the data that matches each category?
javascript reactjs ramda.js
asked Jan 1 at 21:12
Lz430Lz430
727
add a comment |
1
I'm learning React and trying to figure out how I can filter an array based on categories.
The data I'm working with is something like this here:
http://www.mocky.io/v2/5c2bd5683000006900abaff9
So I'm able to filter out all of the categories using this:
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>
);
}
This gives me all of my individual categories. But what I need to do now is get all of these into an accordion. So the category is actually the heading of the accordion. How can I get all of the data that matches each category?
javascript reactjs ramda.js
asked Jan 1 at 21:12
Lz430Lz430
727
The code sample looks truncated; it's not clear how you computecatsR.
– customcommander
Jan 1 at 22:12
In case you're interested, here's an alternative to usingSetto compute a unique list of categories:const categories = compose(uniq, map(prop('category'))).
– customcommander
Jan 1 at 22:52
I apologize. Yes it was truncated..catsR just returns the rest of of my component and then I render it out. I've updated the question with the rest of the code.
– Lz430
Jan 2 at 5:20
add a comment |
1
1
1
I'm learning React and trying to figure out how I can filter an array based on categories.
The data I'm working with is something like this here:
http://www.mocky.io/v2/5c2bd5683000006900abaff9
So I'm able to filter out all of the categories using this:
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>
);
}
This gives me all of my individual categories. But what I need to do now is get all of these into an accordion. So the category is actually the heading of the accordion. How can I get all of the data that matches each category?
javascript reactjs ramda.js
asked Jan 1 at 21:12
Lz430Lz430
727
I'm learning React and trying to figure out how I can filter an array based on categories.
The data I'm working with is something like this here:
http://www.mocky.io/v2/5c2bd5683000006900abaff9
So I'm able to filter out all of the categories using this:
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>
);
}
This gives me all of my individual categories. But what I need to do now is get all of these into an accordion. So the category is actually the heading of the accordion. How can I get all of the data that matches each category?
javascript reactjs ramda.js
javascript reactjs ramda.js
asked Jan 1 at 21:12
Lz430Lz430
727
asked Jan 1 at 21:12
Lz430Lz430
727
edited Jan 2 at 5:21
Lz430
asked Jan 1 at 21:12
Lz430Lz430
727
asked Jan 1 at 21:12
Lz430Lz430
727
asked Jan 1 at 21:12
Lz430Lz430
727
727
The code sample looks truncated; it's not clear how you computecatsR.
– customcommander
Jan 1 at 22:12
In case you're interested, here's an alternative to usingSetto compute a unique list of categories:const categories = compose(uniq, map(prop('category'))).
– customcommander
Jan 1 at 22:52
I apologize. Yes it was truncated..catsR just returns the rest of of my component and then I render it out. I've updated the question with the rest of the code.
– Lz430
Jan 2 at 5:20
add a comment |
The code sample looks truncated; it's not clear how you computecatsR.
– customcommander
Jan 1 at 22:12
In case you're interested, here's an alternative to usingSetto compute a unique list of categories:const categories = compose(uniq, map(prop('category'))).
– customcommander
Jan 1 at 22:52
I apologize. Yes it was truncated..catsR just returns the rest of of my component and then I render it out. I've updated the question with the rest of the code.
– Lz430
Jan 2 at 5:20
The code sample looks truncated; it's not clear how you compute
catsR.– customcommander
Jan 1 at 22:12
The code sample looks truncated; it's not clear how you compute
catsR.– customcommander
Jan 1 at 22:12
In case you're interested, here's an alternative to using
Set to compute a unique list of categories: const categories = compose(uniq, map(prop('category'))).– customcommander
Jan 1 at 22:52
In case you're interested, here's an alternative to using
Set to compute a unique list of categories: const categories = compose(uniq, map(prop('category'))).– customcommander
Jan 1 at 22:52
I apologize. Yes it was truncated..catsR just returns the rest of of my component and then I render it out. I've updated the question with the rest of the code.
– Lz430
Jan 2 at 5:20
I apologize. Yes it was truncated..catsR just returns the rest of of my component and then I render it out. I've updated the question with the rest of the code.
– Lz430
Jan 2 at 5:20
add a comment |
2 Answers
2
active
oldest
votes
4
You can use groupBy to get an object of categories, with an array of values for each category. You can then convert it to an array of category onbjects, using toPairs and map with 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>answered Jan 1 at 21:32
Ori DroriOri Drori
79.7k138797
1
@ScottSauyet - Thanks. I thought about it, but since the data is used for rendering in React, I'm not sure if it's that critical. I'll it as an option. Happy new year :)
– Ori Drori
Jan 1 at 22:44
1
I tend to like to do this everywhere, even when it's not really necessary, to make the structures I use further down the line more understandable. But there definitely is a strong case for not doing so here.
– Scott Sauyet
Jan 1 at 23:05
1
Welcome. I liked this course, and I'm sure @ScottSauyet knows about more resources.
– Ori Drori
Jan 2 at 15:31
1
Christopher Okhravi talks extensively about Ramda functions on his Youtube channel: youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg/videos --> he goes by the functions 1 by 1.
– codeepic
Jan 2 at 22:47
1
I really like Randy Coulman's Thinking in Ramda series.
– Scott Sauyet
Jan 3 at 4:31
|
show 2 more comments
0
You can actually get this done with some object tricks
let categories = {};
this.getVehicleData().map(vehicle => {
categories[vehicle.category] = categories[vehicle.category] ||
categories[vehicle.category].push(vehicle)
})
You can access the values by
Object.keys(categories).map(category => {
console.log('category', category)
console.log('values', categories[category])
})
Hope this works :)
answered Jan 2 at 0:53
SucSuc
264
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998979%2fhow-can-i-filter-an-array-based-on-a-category-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
You can use groupBy to get an object of categories, with an array of values for each category. You can then convert it to an array of category onbjects, using toPairs and map with 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>answered Jan 1 at 21:32
Ori DroriOri Drori
79.7k138797
1
@ScottSauyet - Thanks. I thought about it, but since the data is used for rendering in React, I'm not sure if it's that critical. I'll it as an option. Happy new year :)
– Ori Drori
Jan 1 at 22:44
1
I tend to like to do this everywhere, even when it's not really necessary, to make the structures I use further down the line more understandable. But there definitely is a strong case for not doing so here.
– Scott Sauyet
Jan 1 at 23:05
1
Welcome. I liked this course, and I'm sure @ScottSauyet knows about more resources.
– Ori Drori
Jan 2 at 15:31
1
Christopher Okhravi talks extensively about Ramda functions on his Youtube channel: youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg/videos --> he goes by the functions 1 by 1.
– codeepic
Jan 2 at 22:47
1
I really like Randy Coulman's Thinking in Ramda series.
– Scott Sauyet
Jan 3 at 4:31
|
show 2 more comments
4
You can use groupBy to get an object of categories, with an array of values for each category. You can then convert it to an array of category onbjects, using toPairs and map with 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>answered Jan 1 at 21:32
Ori DroriOri Drori
79.7k138797
1
@ScottSauyet - Thanks. I thought about it, but since the data is used for rendering in React, I'm not sure if it's that critical. I'll it as an option. Happy new year :)
– Ori Drori
Jan 1 at 22:44
1
I tend to like to do this everywhere, even when it's not really necessary, to make the structures I use further down the line more understandable. But there definitely is a strong case for not doing so here.
– Scott Sauyet
Jan 1 at 23:05
1
Welcome. I liked this course, and I'm sure @ScottSauyet knows about more resources.
– Ori Drori
Jan 2 at 15:31
1
Christopher Okhravi talks extensively about Ramda functions on his Youtube channel: youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg/videos --> he goes by the functions 1 by 1.
– codeepic
Jan 2 at 22:47
1
I really like Randy Coulman's Thinking in Ramda series.
– Scott Sauyet
Jan 3 at 4:31
|
show 2 more comments
4
4
4
You can use groupBy to get an object of categories, with an array of values for each category. You can then convert it to an array of category onbjects, using toPairs and map with 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>answered Jan 1 at 21:32
Ori DroriOri Drori
79.7k138797
You can use groupBy to get an object of categories, with an array of values for each category. You can then convert it to an array of category onbjects, using toPairs and map with 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>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>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>answered Jan 1 at 21:32
Ori DroriOri Drori
79.7k138797
edited Jan 1 at 22:45
answered Jan 1 at 21:32
Ori DroriOri Drori
79.7k138797
answered Jan 1 at 21:32
Ori DroriOri Drori
79.7k138797
answered Jan 1 at 21:32
Ori DroriOri Drori
79.7k138797
79.7k138797
1
@ScottSauyet - Thanks. I thought about it, but since the data is used for rendering in React, I'm not sure if it's that critical. I'll it as an option. Happy new year :)
– Ori Drori
Jan 1 at 22:44
1
I tend to like to do this everywhere, even when it's not really necessary, to make the structures I use further down the line more understandable. But there definitely is a strong case for not doing so here.
– Scott Sauyet
Jan 1 at 23:05
1
Welcome. I liked this course, and I'm sure @ScottSauyet knows about more resources.
– Ori Drori
Jan 2 at 15:31
1
Christopher Okhravi talks extensively about Ramda functions on his Youtube channel: youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg/videos --> he goes by the functions 1 by 1.
– codeepic
Jan 2 at 22:47
1
I really like Randy Coulman's Thinking in Ramda series.
– Scott Sauyet
Jan 3 at 4:31
|
show 2 more comments
1
@ScottSauyet - Thanks. I thought about it, but since the data is used for rendering in React, I'm not sure if it's that critical. I'll it as an option. Happy new year :)
– Ori Drori
Jan 1 at 22:44
1
I tend to like to do this everywhere, even when it's not really necessary, to make the structures I use further down the line more understandable. But there definitely is a strong case for not doing so here.
– Scott Sauyet
Jan 1 at 23:05
1
Welcome. I liked this course, and I'm sure @ScottSauyet knows about more resources.
– Ori Drori
Jan 2 at 15:31
1
Christopher Okhravi talks extensively about Ramda functions on his Youtube channel: youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg/videos --> he goes by the functions 1 by 1.
– codeepic
Jan 2 at 22:47
1
I really like Randy Coulman's Thinking in Ramda series.
– Scott Sauyet
Jan 3 at 4:31
1
1
@ScottSauyet - Thanks. I thought about it, but since the data is used for rendering in React, I'm not sure if it's that critical. I'll it as an option. Happy new year :)
– Ori Drori
Jan 1 at 22:44
@ScottSauyet - Thanks. I thought about it, but since the data is used for rendering in React, I'm not sure if it's that critical. I'll it as an option. Happy new year :)
– Ori Drori
Jan 1 at 22:44
1
1
I tend to like to do this everywhere, even when it's not really necessary, to make the structures I use further down the line more understandable. But there definitely is a strong case for not doing so here.
– Scott Sauyet
Jan 1 at 23:05
I tend to like to do this everywhere, even when it's not really necessary, to make the structures I use further down the line more understandable. But there definitely is a strong case for not doing so here.
– Scott Sauyet
Jan 1 at 23:05
1
1
Welcome. I liked this course, and I'm sure @ScottSauyet knows about more resources.
– Ori Drori
Jan 2 at 15:31
Welcome. I liked this course, and I'm sure @ScottSauyet knows about more resources.
– Ori Drori
Jan 2 at 15:31
1
1
Christopher Okhravi talks extensively about Ramda functions on his Youtube channel: youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg/videos --> he goes by the functions 1 by 1.
– codeepic
Jan 2 at 22:47
Christopher Okhravi talks extensively about Ramda functions on his Youtube channel: youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg/videos --> he goes by the functions 1 by 1.
– codeepic
Jan 2 at 22:47
1
1
I really like Randy Coulman's Thinking in Ramda series.
– Scott Sauyet
Jan 3 at 4:31
I really like Randy Coulman's Thinking in Ramda series.
– Scott Sauyet
Jan 3 at 4:31
|
show 2 more comments
0
You can actually get this done with some object tricks
let categories = {};
this.getVehicleData().map(vehicle => {
categories[vehicle.category] = categories[vehicle.category] ||
categories[vehicle.category].push(vehicle)
})
You can access the values by
Object.keys(categories).map(category => {
console.log('category', category)
console.log('values', categories[category])
})
Hope this works :)
answered Jan 2 at 0:53
SucSuc
264
add a comment |
0
You can actually get this done with some object tricks
let categories = {};
this.getVehicleData().map(vehicle => {
categories[vehicle.category] = categories[vehicle.category] ||
categories[vehicle.category].push(vehicle)
})
You can access the values by
Object.keys(categories).map(category => {
console.log('category', category)
console.log('values', categories[category])
})
Hope this works :)
answered Jan 2 at 0:53
SucSuc
264
add a comment |
0
0
0
You can actually get this done with some object tricks
let categories = {};
this.getVehicleData().map(vehicle => {
categories[vehicle.category] = categories[vehicle.category] ||
categories[vehicle.category].push(vehicle)
})
You can access the values by
Object.keys(categories).map(category => {
console.log('category', category)
console.log('values', categories[category])
})
Hope this works :)
answered Jan 2 at 0:53
SucSuc
264
You can actually get this done with some object tricks
let categories = {};
this.getVehicleData().map(vehicle => {
categories[vehicle.category] = categories[vehicle.category] ||
categories[vehicle.category].push(vehicle)
})
You can access the values by
Object.keys(categories).map(category => {
console.log('category', category)
console.log('values', categories[category])
})
Hope this works :)
answered Jan 2 at 0:53
SucSuc
264
answered Jan 2 at 0:53
SucSuc
264
answered Jan 2 at 0:53
SucSuc
264
answered Jan 2 at 0:53
SucSuc
264
264
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998979%2fhow-can-i-filter-an-array-based-on-a-category-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The code sample looks truncated; it's not clear how you compute
catsR.– customcommander
Jan 1 at 22:12
In case you're interested, here's an alternative to using
Setto compute a unique list of categories:const categories = compose(uniq, map(prop('category'))).– customcommander
Jan 1 at 22:52
I apologize. Yes it was truncated..catsR just returns the rest of of my component and then I render it out. I've updated the question with the rest of the code.
– Lz430
Jan 2 at 5:20