I have an array of objects with dynamic keys and values (so not all objects have category_id, size and so on) but I simplified it to this:
let products_row = [
{
id: 1,
category_id: 11,
options: {
'modelName1': {
size: '2 feet',
colour: 'red',
is_new: true
},
'modelName2': {
size: '4 feet',
colour: 'black',
is_new: true
},
}
},
{
id: 2,
category_id: 21,
options: {
'modelName11': {
size: '2 feet',
colour: 'white',
is_new: false
},
'modelName12': {
size: '4 feet',
colour: 'white',
is_new: false
},
}
},
{
id: 3,
category_id: 31,
options: {
'modelName21': {
size: '8 feet',
colour: 'white',
is_new: false
},
'modelName22': {
size: '4 feet',
colour: 'black',
is_new: true
},
}
},
{
id: 4,
category_id: 41,
options: {
'modelName31': {
size: '8 feet',
colour: 'red',
is_new: true
},
'modelName32': {
size: '8 feet',
colour: 'red',
is_new: true
},
}
}
]
the result data structure needs to be like this:
let resultArray = [
{
id: 1,
category_id: 11,
model: 'modelName1',
size: '2 feet',
colour: 'red',
is_new: true
},
{
id: 1,
category_id: 11,
model: 'modelName2',
size: '4 feet',
colour: 'black',
is_new: true
},
{
id: 2,
category_id: 21,
model: 'modelName11',
size: '2 feet',
colour: 'white',
is_new: false
},
{
id: 2,
category_id: 21,
model: 'modelName12',
size: '4 feet',
colour: 'white',
is_new: false
},
{
id: 3,
category_id: 31,
model: 'modelName21',
size: '8 feet',
colour: 'white',
is_new: false
},
{
id: 3,
category_id: 31,
model: 'modelName22',
size: '4 feet',
colour: 'black',
is_new: true
},
{
id: 4,
category_id: 41,
model: 'modelName31',
size: '8 feet',
colour: 'red',
is_new: true
},
{
id: 4,
category_id: 41,
model: 'modelName32',
size: '8 feet',
colour: 'red',
is_new: true
},
]
This is what I have tried:
let productsData = [];
products_row
.map((product, p) => Object.entries(product.options || {})
.filter((model, i) => {
return productsData.push(
{
model: model[0],
[Object.keys(product).filter(el => delete product.options)[i]]: Object.values(product)[i],
[Object.keys(model[1] || [])[i]]: Object.values(model[1] || [])[i],
}
)
})
)
console.log(productsData)
But it returns not all data, which is expected because I can't figure out how to keep previous key-values:
[
{
model: 'modelName1',
id: 1,
size: '2 feet',
},
{
model: 'modelName2',
category_id: 11,
colour: 'black',
},
{
model: 'modelName11',
id: 2,
size: '2 feet',
},
{
model: 'modelName12',
category_id: 21,
colour: 'white',
},
{
model: 'modelName21',
id: 3,
size: '8 feet',
},
{
model: 'modelName22',
category_id: 31,
colour: 'black',
},
{
model: 'modelName31',
id: 4,
size: '8 feet',
},
{
model: 'modelName32',
category_id: 41,
colour: 'red',
},
]
I am completely stuck, any help is appreciated. Thank you.
you can use flatMap and map
What flatMap does is if the returned array of map looks like
[
[{...1},{...2}],
[{...3},{...4}]
]
it will flatten it and give
[
{...1},{...2},
{...3},{...4}
]
let products_row = [{id: 1,category_id: 11,options: {'modelName1': {size: '2 feet',colour: 'red',is_new: true},'modelName2': {size: '4 feet',colour: 'black',is_new: true},}},{id: 2,category_id: 21,options: {'modelName11': {size: '2 feet',colour: 'white',is_new: false},'modelName12': {size: '4 feet',colour: 'white',is_new: false},}},{id: 3,category_id: 31,options: {'modelName21': {size: '8 feet',colour: 'white',is_new: false},'modelName22': {size: '4 feet',colour: 'black',is_new: true},}},{id: 4,category_id: 41,options: {'modelName31': {size: '8 feet',colour: 'red',is_new: true},'modelName32': {size: '8 feet',colour: 'red',is_new: true},}}]
let x = products_row.flatMap(({options,...rest}) => Object.entries(options).map(([k,v]) => ({...v,...rest,model:k})))
console.log(x)
It is quite hard to analyze your solution and reason about your idea, so I cannot fix your code.
What you want to do is to extract options from each object and attach the rest of object, in other words you want to iterate over each option for each product row.
There are numerous ways to achieve this, you can use flatMap as #cmgchess suggested. Easier to understand is something like this:
let result = [];
products_row.forEach(({ options, ...rest }) =>
Object.values(options).forEach((b) => result.push({ ...rest, ...b })),
);
Related
I want it to be sorted by date and alphabet in one sort how can i do that ?
I think alphabetical order works good but date not works properly. Thanks for answers.
Data structure :
[{
productId: 21,
title: "Huawei P40 Lite ",
brand: "Huawei",
price: 120,
discountPercentage: 10,
color: "Black",
createdDate: "2021-01-15T01:00:00+03:00",
},
{
productId: 22,
title: "Huawei P40 Lite",
brand: "Huawei",
price: 1026,
discountPercentage: 0,
color: "Green",
createdDate: "2021-01-16T01:00:00+03:00",
},
{
productId: 23,
title: "Apple iPhone 11",
brand: "Apple",
price: 1220,
discountPercentage: 11,
color: "White",
createdDate: "2021-01-17T01:00:00+03:00",
},
{
productId: 24,
title: "Apple iPhone 12",
brand: "Apple",
price: 1420,
discountPercentage: 11,
color: "White",
createdDate: "2021-01-18T01:00:00+03:00",
}],
Here my work :
jsfiddle.net/pazyqb01/
And tried different solutions for sort date somehow i couldn't make it work.
Sorted Array shoul be like above :
{
productId: 24,
title: "Apple iPhone 12",
brand: "Apple",
price: 1420,
discountPercentage: 11,
color: "White",
createdDate: "2021-01-18T01:00:00+03:00",
},
{
productId: 23,
title: "Apple iPhone 11",
brand: "Apple",
price: 1220,
discountPercentage: 11,
color: "White",
createdDate: "2021-01-17T01:00:00+03:00",
},
{
productId: 22,
title: "Huawei P40 Lite",
brand: "Huawei",
price: 1026,
discountPercentage: 0,
color: "Green",
createdDate: "2021-01-16T01:00:00+03:00",
},
{
productId: 21,
title: "Huawei P40 Lite ",
brand: "Huawei",
price: 120,
discountPercentage: 10,
color: "Black",
createdDate: "2021-01-15T01:00:00+03:00",
},
this way:
simply follow the list of your sorting criteria
const data =
[ { productId: 21, title: 'Huawei P40 Lite ', brand: 'Huawei', price: 120, discountPercentage: 10, color: 'Black', createdDate: '2021-01-15T01:00:00+03:00' }
, { productId: 22, title: 'Huawei P40 Lite', brand: 'Huawei', price: 1026, discountPercentage: 0, color: 'Green', createdDate: '2021-01-16T01:00:00+03:00' }
, { productId: 23, title: 'Apple iPhone 11', brand: 'Apple', price: 1220, discountPercentage: 11, color: 'White', createdDate: '2021-01-17T01:00:00+03:00' }
, { productId: 24, title: 'Apple iPhone 12', brand: 'Apple', price: 1420, discountPercentage: 11, color: 'White', createdDate: '2021-01-18T01:00:00+03:00' }
]
const fSort = (a,b) =>
{
let Dx = new Date(b.createdDate) - new Date(a.createdDate) // 1st criteria
if (Dx===0) Dx = a.title.trim().localeCompare(b.title.trim()) // 2nd
// if (Dx===0) Dx = ... // 3rd
// if (Dx===0) Dx = ... // 4th....
return Dx
}
console.log( data.sort(fSort))
This question already has answers here:
sorting object Sunday to Saturday in javascript
(2 answers)
Closed 2 years ago.
I have a array as bellow:
const list = [
{ id: 1, name: 'Product 1', color: 'white'},
{ id: 2, name: 'Product 2', color: 'black'},
{ id: 3, name: 'Product 3', color: 'red'},
{ id: 4, name: 'Product 4', color: 'white'},
{ id: 5, name: 'Product 5', color: 'black'},
]
I want to sort array based on predefined order by color: red -> white -> black and output:
const list = [
{ id: 3, name: 'Product 3', color: 'red'},
{ id: 1, name: 'Product 1', color: 'white'},
{ id: 4, name: 'Product 4', color: 'white'},
{ id: 5, name: 'Product 5', color: 'black'},
{ id: 2, name: 'Product 2', color: 'black'}
]
let colorPriority = ['red', 'white', 'black'];
list = list.sort((obj1, obj2) => colorPriority.indexOf(obj1.color) - colorPriority.indexOf(obj2.color));
this code should work for you.
I want to have highchart drilldown with more than 3 levels.
Also, I have tried referring below articles, but I was not able to figure out.
Drilldown multiple levels Highchart
Highcharts - drill down to multiple series
I could do only till 3 levels. After that, bar is not clickable.
Not sure where the mistake is, but this is what I have done so far.
2 Level Drill down - Works fine
Multilevel - Works only till Month level, cannot filter Day level
https://jsfiddle.net/foodiepanda/2ec7d6fz/9/
Below is code (only jquery)
/*Start*/
$('#chart1').highcharts({
chart: {type: 'column'},
title: {text: 'Multi Drilldown'},
xAxis: {type: 'category'},
legend: {enabled: false},
plotOptions:
{
series:
{
dataLabels:
{
enabled: true, //Shown at top of column
}
}
},
series:
[
{
name: 'Year',
//colorByPoint: false,
data:
[
{name: '2019',y: 200,drilldown: '2019'}, //200 clicks in 2018
{name: '2020',y: 450,drilldown: '2020'}, //450 clicks in 2019
]
}
],
drilldown:
{
series:
[
{
id: '2019', //For 2019
name: 'Quarter', //Splitting 200 as 50,100,20,30
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 20,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 30,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,30,20
data:
[
{
name: 'Jan',
y: 10,
drilldown: 'Jan'
},
{
name: 'Feb',
y: 30,
drilldown: 'Feb'
},
{
name: 'Mar',
y: 20,
drilldown: 'Mar'
}
]
},
{
id: 'Jan',
name: 'Day', //Splitting 10 as ...[days]
data:
[
{name:'1', y: 0},
{name:'2', y: 0},
{name:'3', y: 2},
{name:'4', y: 0},
{name:'5', y: 0},
{name:'6', y: 0},
{name:'7', y: 0},
{name:'8', y: 0},
{name:'9', y: 0},
{name:'10', y: 0},
{name:'11', y: 1},
{name:'12', y: 2},
{name:'13', y: 0},
{name:'14', y: 1},
{name:'15', y: 0},
{name:'16', y: 0},
{name:'17', y: 0},
{name:'18', y: 0},
{name:'19', y: 0},
{name:'20', y: 0},
{name:'21', y: 0},
{name:'22', y: 0},
{name:'23', y: 0},
{name:'24', y: 0},
{name:'25', y: 2},
{name:'26', y: 0},
{name:'27', y: 0},
{name:'28', y: 0},
{name:'29', y: 0},
{name:'30', y: 1},
{name:'31', y: 1}
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 80,10,10
data:
[
['Apr', 80],
['May', 10],
['Jun', 10]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 20 as 5,10,5
data:
[
['Jul', 5],
['Aug', 10],
['Sep', 5]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 30 as 5,15,10
data:
[
['Oct', 5],
['Nov', 15],
['Dec', 10]
]
},
//For 2020
{
id: '2020',
name: 'Quarter', //Splitting 450 as 50,100,50,250
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 50,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 250,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,35,5
data:
[
['Jan', 10],
['Feb', 35],
['Mar', 5]
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 40,35,25
data:
[
['Apr', 40],
['May', 35],
['Jun', 25]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 50 as 5,25,20
data:
[
['Jul', 5],
['Aug', 25],
['Sep', 20]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 250 as 75,125,50
data:
[
['Oct', 75],
['Nov', 125],
['Dec', 50]
]
},
] //End Series
} //End Year Drilldown
}); //End Highchart function
//Explicitly change Y axis
var curChart = $('#chart1').highcharts();
curChart.yAxis[0].update({
title:{
text:"Number of Hits"
}
});
/*End*/
I was able to figure out what the issue was.
The name parameter and drilldown parameter were having same values.
I just renamed name parameter from 'Q1' to '_Q1' and it worked like a charm.
{
name: 'Q1',
y: 50,
drilldown: '_Q1'
}
Updated JSFiddle :
https://jsfiddle.net/foodiepanda/2ec7d6fz/11/
I have an Array of Objects containing product information where there are categories and colors as fields. Now, I have another array containing which categories and which colors to show.
Main Array:
products: [{
id: 1,
name: 'Product 1',
category: 'Home',
skill: 'Easy',
color: 'blue',
price: 100.00
}, {
id: 2,
name: 'Product 2',
category: 'Home',
skill: 'Intermediate',
color: 'red',
price: 120.00
}, {
id: 3,
name: 'Product 3',
category: 'Office',
skill: 'Intermediate',
color: 'green',
price: 190.00
}, {
id: 4,
name: 'Product 4',
category: 'Office',
skill: 'Advanced',
color: 'blue',
price: 260.00
}, {
id: 5,
name: 'Product 5',
category: 'Warehouse',
skill: 'Advanced',
color: 'white',
price: 321.00
}, {
id: 6,
name: 'Product 6',
category: 'Farm',
skill: 'Intermediate',
color: 'red',
price: 120.00
}, {
id: 7,
name: 'Product 7',
category: 'Space',
skill: 'Advanced',
color: 'green',
price: 150.00
}, {
id: 8,
name: 'Product 8',
category: 'Bathroom',
skill: 'Easy',
color: 'black',
price: 9.00
}],
My another array containing filter options:
selectedFilters: {
categories : ["home", "bathroom"] ,
colors : ["blue", "red"]
}
Now I want my output as:
[{
id: 1,
name: 'Product 1',
category: 'Home',
skill: 'Easy',
color: 'blue',
price: 100.00
}, {
id: 2,
name: 'Product 2',
category: 'Home',
skill: 'Intermediate',
color: 'red',
price: 120.00
}]
I tried the normal array filter method:
this.filteredProducts = this.products.filter(prod => {
// [prod.category, prod.color].some(val => this.selectedFilters.includes(val))
console.log(this.selectedFilters);
for (let i = 0; i < this.selectedFilters.length; i++) {
// console.log('Selected Category : ', this.selectedFilters[i]);
// console.log('Product Category : ', prod.category);
if (prod.category == this.selectedFilters[i]) {
console.log('Called category');
return true;
} else if (prod.color == this.selectedFilters[i]) {
console.log('Called color');
return true;
} else {
console.log('Called else');
continue;
}
}
});
How can I achieve this using array filter functions or Lodash functions?
No need for a library, use the standard .filter method to filter an array, check to see if each object's color and category is included in the selectedFilters object:
const products = [{
id: 1,
name: 'Product 1',
category: 'Home',
skill: 'Easy',
color: 'blue',
price: 100.00
}, {
id: 2,
name: 'Product 2',
category: 'Home',
skill: 'Intermediate',
color: 'red',
price: 120.00
}, {
id: 3,
name: 'Product 3',
category: 'Office',
skill: 'Intermediate',
color: 'green',
price: 190.00
}, {
id: 4,
name: 'Product 4',
category: 'Office',
skill: 'Advanced',
color: 'blue',
price: 260.00
}, {
id: 5,
name: 'Product 5',
category: 'Warehouse',
skill: 'Advanced',
color: 'white',
price: 321.00
}, {
id: 6,
name: 'Product 6',
category: 'Farm',
skill: 'Intermediate',
color: 'red',
price: 120.00
}, {
id: 7,
name: 'Product 7',
category: 'Space',
skill: 'Advanced',
color: 'green',
price: 150.00
}, {
id: 8,
name: 'Product 8',
category: 'Bathroom',
skill: 'Easy',
color: 'black',
price: 9.00
}];
const selectedFilters = {
categories : ["home", "bathroom"] ,
colors : ["blue", "red"]
};
const { categories, colors } = selectedFilters;
const filteredProducts = products.filter(({ category, color }) => (
categories.includes(category.toLowerCase()) && colors.includes(color.toLowerCase())
));
console.log(filteredProducts);
I am automating a scenario in which i get list of elements store it in an array, I need to remove the repeating word "teniss" from the array.
Till yet i am able to fetch the elements & trying to use the if condition to achieve it.
var lists=element.all(By.css(".entity-link>a"));
lists.getText().then(function(text){
console.log("The list contents are "+text);
}
for (var i=0; i<40;){
if (lists.get(i) === 'teniss')
{
lists.get(i)=="";
}
i++;
}
output of the map function:
[ { index: 0, text: 'teniss' },
{ index: 1, text: 'ARTICLE 1' },
{ index: 2, text: 'teniss' },
{ index: 3, text: 'ARTICLE 2' },
{ index: 4, text: 'teniss' },
{ index: 5, text: 'ARTICLE 3' },
{ index: 6, text: 'teniss' },
{ index: 7, text: 'ARTICLE 4' },
{ index: 8, text: 'teniss' },
{ index: 9, text: 'ARTICLE 5' },
{ index: 10, text: 'teniss' },
{ index: 11, text: 'ARTICLE 6' },
{ index: 12, text: 'teniss' },
{ index: 13, text: 'ARTICLE 7' },
{ index: 14, text: 'teniss' },
{ index: 15, text: 'ARTICLE 8' },
{ index: 16, text: 'teniss' },
{ index: 17, text: 'ARTICLE 9' },
{ index: 18, text: 'teniss' },
{ index: 19, text: 'ARTICLE 10' },
{ index: 20, text: 'teniss' },
{ index: 21, text: 'ARTICLE 11' },
{ index: 22, text: 'teniss' },
{ index: 23, text: 'ARTICLE 12' },
{ index: 24, text: 'teniss' },
{ index: 25, text: 'ARTICLE 13' },
{ index: 26, text: 'teniss' },
{ index: 27, text: 'ARTICLE 14' },
{ index: 28, text: 'teniss' },
{ index: 29, text: 'ARTICLE 15' },
{ index: 30, text: 'teniss' },
{ index: 31, text: 'ARTICLE 16' },
{ index: 32, text: 'teniss' },
{ index: 33, text: 'ARTICLE 17' },
{ index: 34, text: 'teniss' },
{ index: 35, text: 'ARTICLE 18' },
{ index: 36, text: 'teniss' },
{ index: 37, text: 'teniss' },
{ index: 38, text: 'teniss' } ]