I have a object which is created by groupBy function.
const productOptions = {
color: [
{ id: 1, type: "color", name: "red" },
{ id: 2, type: "color", name: "orange" },
{ id: 3, type: "color", name: "yellow" },
],
size: [
{ id: 4, type: "size", name: "sm" },
{ id: 5, type: "size", name: "md" },
{ id: 6, type: "size", name: "lg" },
{ id: 7, type: "size", name: "xl" },
],
};
To display product options by type, I hardcoded it like below.
<ProductOption productOptionType={"color"} productOptions={productOptions.color} />
<ProductOption productOptionType={"size"} productOptions={productOptions.size} />
In the future, weight, accessory, and more will be added to type.
I hate this static structure. Is there a way to display it dynamically using productOptions object at once??
I tried with .map(), But object's keys are not accessible.
I also tried with for-in loop, It doesn't render well.
How can I solve this???
Use Object.keys to loop over keys, then you can dynamically render as many as you want. So render this:
Object.keys(productOptions).map(key => (
<ProductOption productOptionType={key} productOptions={productOptions[key]} />
))
You could use Object.keys here
Object.keys(productOptions).map((item)=>(
<ProductOption productOptionType={item} productOptions={productOptions[item]} />
)
Related
What's the best way to loop through a javascript array, looking for elements of interest and, for each one, make the elements in between "children" of the preceding element of interest?
Essentially, I want to go from flat data that looks like:
[
{
value: "foo",
type: "header!"
},
{
value: "bar",
type: "normal"
},
{
value: "bar",
type: "normal"
},
{
value: "foo",
type: "header!"
},
{
value: "bar",
type: "normal"
}
]
To something more like:
[
{
value: "foo",
type: "header!",
children: [
{
value: "foo",
type: "normal"
},
{
value: "bar",
type: "normal"
}
]
},
{
value: "bar",
type: "header!",
children: [
{
value: "foo",
type: "normal"
}
]
},
]
I think that Array.reduce is what I need here, but I'm struggling with exactly how to make it do what I need.
So far I've tried code that looks like:
const nestedArray = flatArray.map(el => {
if(el.type === "header!") return {
type: el.type,
children: []
}
})
Just loop, check the type field and push it either in the main array or in the children of the last header:
data = [
{value: "foo", type: "header!"},
{value: "bar", type: "normal"},
{value: "bar", type: "normal"},
{value: "foo", type: "header!"},
{value: "bar", type: "normal"}
]
let tree = [], last
for (let elem of data) {
if (elem.type === 'header!')
tree.push(last = {...elem, children: []})
else
last.children.push(elem)
}
console.log(tree)
As a general advice, try to avoid functions like map and reduce when manipulating complex data structures. They are far less readable, harder to reason about and much slower than for..of loops.
I am trying to use conditional statements (&& or ?) inside an object that is returned within method in React component. Is it possible?
The issue is I want to add to condition multiple properties. It works with just one like this:
arr: [
isInsidePlan
? {
label: 'anything1'
value: 1,
} :
{
label: 'anything2'
value: 2,
},
{
label: 'anything3'
value: 3,
},
{
label: 'anything4'
value: 4,
},
],
What I would like to achieve is to do it with all other properties inside else condition. Like this: (this code doesn't work)
arr: [
isInsidePlan
? ({
label: 'anything1'
value: 1,
}) :
({
label: 'anything2'
value: 2,
},
{
label: 'anything3'
value: 3,
},
{
label: 'anything4'
value: 4,
})
],
I get an error:
Left side of comma operator is unused and has no side effects.
You should make the if condition outside the array itself.
Something like:
arr: isInsidePlan ? [
{
label: 'anything1'
value: 1,
}] :
[{
label: 'anything2'
value: 2,
},
{
label: 'anything3'
value: 3,
},
{
label: 'anything4'
value: 4,
}]
],
How can I create an json format in javascript
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
]
I can add the 'node' using data.push, but how to proceed with childrens?
Thank's!
First off, there is no such thing as a JSON array. You are working with an array. JSON is a way to transfer data between systems.
You have an array called data that you need to push an object into...
so something like:
data.push({
label: 'node3',
children: [
{ label: 'child3' },
{ label: 'child3' }
]
});
Now.. you've got a problem at this point, because you are duplicating the label property, which is not allowed under ES5 strict mode.
By using select2.js v4 plugin , how set the default selected value when I use a local array data for source?
for example with this code
var data_names = [{
id: 0,
text: "Henri",
}, {
id: 1,
text: "John",
}, {
id: 2,
text: "Victor",
}, {
id: 3,
text: "Marie",
}];
$('select').select2({
data: data_names,
});
How set id 3 as the default selected value?
$('.select').select2({
data: data_names,
}).select2("val",3);
this worked for me with V4.0.3
$('.select').select2({
data: data_names,
})
$('select').val(3);
$('select').trigger('change.select2');
It is better you send another attribute (selected in my case below) for select and use it to set the default value. I did something like below -
var data_names = [{
id: 0,
text: "Henri",
}, {
id: 1,
text: "John",
}, {
id: 2,
text: "Victor",
}, {
id: 3,
text: "Marie",
selected: true
}];
then do
$(".select").select2({
data : data_names
});
data_names.forEach(function(name){
if(name.selected) {
$(".select").select2('val',name.id);
}
});
It's worked for me.
$('#select').select2({data: data_names}).val(3).trigger('change')
lets say i want to start with empty value of variable data, how can to achieve this result with javascript using push method:
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
i have tried:
data.push("label: nodel", "children:"+ ['child1', 'child2']);
looking at code above i need to insert one element that will be linked with list of childs. Can someone help me achieve this.. i would be very grateful.
Best regards.
Is this what you mean?
var object1 = {
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
};
var data = new Array();
data.push(object1);
OR
data.push({ label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] });
EDITED TO SHOW YOSHIS VERSION ASWELL