How to handle object which is created by groupBy function at once? - javascript

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

How can I loop through a flat JS array, turning it into a nested parent/child structure?

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.

Conditional object properties in React

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,
}]
],

Javascript array with a mix of literals and arrays

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.

Select2.js v4.0: how set the default selected value with a local array data source?

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')

java script filling up an array so it matches following structure

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

Categories

Resources