We Keep Coding

Group nested objects with reduce

I have an array with objects
const data = [{
"id": 19887003,
"category": "Shops",
"details": "Shoe Store",
"star": 2,
"subCategory": "Outlet",
},
{
"id": 19234003,
"category": "Shops",
"details": "Shoe Point",
"star": 2,
"subCategory": "Outlet",
},
{
"id": 190456003,
"category": "Food",
"details": "Korean",
"star": 4,
"subCategory": "Restaurant",
},
{
"id": 190111003,
"category": "Food",
"details": "Chinese",
"star": 4,
"subCategory": "Restaurant",
},
{
"id": 1902303,
"category": "Food",
"details": "Lounge",
"star": 4,
"subCategory": "Bar",
}]
this is a small piece but the structure is the same for all objects: i have a category, with multiple subcategories and sometimes the subcategory has details..for example the category food has the subcategory restourant and restourant has many types (chinese, korean).
My goal is to get a structure like that:
[
{
"category": "Food",
"subCategories": [
{
"Subcategory": "Bar",
"details": [
{
name: "Lounge",
star: 2,
id: 1902303
}
]
},
{
"Subcategory": "Restaurant",
"details": [
{
name: "Chinese",
star: 4,
id: 190111003
},
{
name: "Korean",
star: 4,
id: 190456003
}
]
}
},
{
"category": "Shops",
"subCategories": [
{
"Subcategory": "Outlet",
"details": [
{
name: "Shoe Store",
star: 2,
id: 19887003
},
{
name: "Shoe Point",
star: 2,
id: 19234003
}
]
}
]
}
]
My attempt:
const groupedCategories = data.reduce((accumulator, element) => {
const detail = element.details;
const category = element.category;
const subCategory = element.subCategory;
if (accumulator[category]){
return {
...accumulator,
[category]: {
...accumulator[category],
subCategories: [...new Set([...accumulator[category].subCategories,subCategory])],
}
}}
else {
return {
...accumulator,
[category]: {
subCategories: [subCategory],
}
}
}
}, {});
I tried use reduce method like that but this is not the exact structure I desire in particular how to put details fields into subcategories.
Thanks

array.reduce seems to be the right choice. Simplest approach is to have double if statement to check if previous element (category and subcategory exists) and either push into existing array or create new object on upper level:
const data = [{
"id": 19887003,
"category": "Shops",
"details": "Shoe Store",
"star": 2,
"subCategory": "Outlet",
},
{
"id": 19234003,
"category": "Shops",
"details": "Shoe Point",
"star": 2,
"subCategory": "Outlet",
},
{
"id": 190456003,
"category": "Food",
"details": "Korean",
"star": 4,
"subCategory": "Restaurant",
},
{
"id": 190111003,
"category": "Food",
"details": "Chinese",
"star": 4,
"subCategory": "Restaurant",
},
{
"id": 1902303,
"category": "Food",
"details": "Lounge",
"star": 4,
"subCategory": "Bar",
}]
let output = data.reduce((acc,cur) => {
let {category, subCategory, ...rest} = cur;
let prevCat = acc.find(x => x.category === category);
if(!prevCat){
acc.push({category, subCategories: [{subCategory, details: [rest]}]});
} else {
let prevSubCat = prevCat.subCategories.find(x => x.subCategory === subCategory);
if(!prevSubCat) {
prevCat.subCategories.push({subCategory, details: [rest]});
} else {
prevSubCat.details.push(rest);
}
}
return acc;
}, []);
console.log(output);

Json Path sum functions for List of List

I am using JSON path to do something similar to this:
I have copied the JSON path example, but modified the price field to represent price Year-over-Year (number to array).
{
"store": {
"book": [
{
"category": "reference",
"author": "Nigel Rees",
"title": "Sayings of the Century",
"price": [ 1, 2, 3 ]
},
{
"category" :"fiction",
"author": "Evelyn Waugh",
"title": "Sword of Honour",
"price": [ 1, 2, 3 ]
},
{
"category": "fiction",
"author": "Herman Melville",
"title": "Moby Dick",
"isbn": "0-553-21311-3",
"price": [ 1, 2, 3 ]
},
{
"category": "fiction",
"author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
"price": [ 1, 2, 3 ]
}
],
"bicycle": {
"color": "red",
"price": [ 1, 2, 3 ]
}
},
"expensive": 10
}
What I want to find is the year over year total price for all the books.
I can get a Array of Array (lets say res) using: $.store.book[*].price
Output:
[
[ 1, 2, 3 ],
[ 1, 2, 3 ],
[ 1, 2, 3 ],
[ 1, 2, 3 ]
]
I want to further reduce this output (by sum) to:
[4, 8, 12] // Sum up nth element of each array.
// (res[0][0] + res[1][0] + res[2][0] + res[3][0] = 4 ... and so on)
Is there a way to achieve this using jsonpath (preferred)/any other JavaScript syntax ?

let data = [
[ 1, 7, 3 ],
[ 2, 6, 3 ],
[ 3, 5, 3 ],
[ 4, 4, 3 ]
]
let result = data[0].map((_, colIndex) => data.map(row => row[colIndex]))
.map(value => value.reduce((acc, value) => acc + value, 0))
console.log(result) // [ 10, 22, 12 ]
The first map transposes rows and columns, the second map sums up what after the transpose are the rows.

const data = {
"store": {
"book": [{
"category": "reference",
"author": "Nigel Rees",
"title": "Sayings of the Century",
"price": [1, 2, 3]
},
{
"category": "fiction",
"author": "Evelyn Waugh",
"title": "Sword of Honour",
"price": [1, 2, 3]
},
{
"category": "fiction",
"author": "Herman Melville",
"title": "Moby Dick",
"isbn": "0-553-21311-3",
"price": [1, 2, 3]
},
{
"category": "fiction",
"author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
"price": [1, 2, 3]
}
]
}
}
const prices = []
data.store.book.forEach(book => {
book.price.forEach((price, index) => {
if (!prices[index]) prices[index] = 0;
prices[index] += price;
})
})
console.log(prices)

You can sum each of the columns in the matrix by mapping the first row columns to a reduction of each of their subsequent rows.
const data = {"store":{"book":[{"category":"reference","author":"Nigel Rees","title":"Sayings of the Century","price":[1,2,3]},{"category":"fiction","author":"Evelyn Waugh","title":"Sword of Honour","price":[1,2,3]},{"category":"fiction","author":"Herman Melville","title":"Moby Dick","isbn":"0-553-21311-3","price":[1,2,3]},{"category":"fiction","author":"J. R. R. Tolkien","title":"The Lord of the Rings","isbn":"0-395-19395-8","price":[1,2,3]}],"bicycle":{"color":"red","price":[1,2,3]}},"expensive":10};
const sumColumns = (matrix) =>
matrix[0].map((_, col) =>
matrix.reduce((acc, data, row) => acc + data[col], 0));
const bookPrices = data.store.book.map(({ price }) => price);
const priceSums = sumColumns(bookPrices);
console.log(priceSums); // [ 4, 8, 12 ]
.as-console-wrapper { top: 0; max-height: 100% !important; }

You can use some .map() and Array.prototype.reduce() paired with comma operator.
const a = { "store": { "book": [{ "category": "reference", "author": "Nigel Rees", "title": "Sayings of the Century", "price": [1, 2, 3] }, { "category": "fiction", "author": "Evelyn Waugh", "title": "Sword of Honour", "price": [1, 2, 3] }, { "category": "fiction", "author": "Herman Melville", "title": "Moby Dick", "isbn": "0-553-21311-3", "price": [1, 2, 3] }, { "category": "fiction", "author": "J. R. R. Tolkien", "title": "The Lord of the Rings", "isbn": "0-395-19395-8", "price": [1, 2, 3] } ], "bicycle": { "color": "red", "price": [1, 2, 3] } }, "expensive": 10 }.store.book
console.log(a.map(x=>x.price).reduce((x,y)=>(y.map((i,z)=>x[z]+=y[z]),x)))

Array object grouping in JavaScript

I need to convert below unformatted JSON format into formatted input. We need to find id's similar to parent id for different items inside array element of object and then need to push it into children to that id. Below is my code that needs to transform
Input
{
"0": [
{
"id": 10,
"title": "House",
"level": 0,
"children": [],
"parent_id": null
}
],
"1": [
{
"id": 12,
"title": "Red Roof",
"level": 1,
"children": [],
"parent_id": 10
},
{
"id": 18,
"title": "Blue Roof",
"level": 1,
"children": [],
"parent_id": 10
}
],
"2": [
{
"id": 17,
"title": "Blue Windoww",
"level": 2,
"children": [],
"parent_id": 12
},
{
"id": 16,
"title": "Door",
"level": 2,
"children": [],
"parent_id": 13
}
]
}
Output
[
{
"id": 10,
"title": "House",
"level": 0,
"children": [
{
"id": 12,
"title": "RedRoofff",
"level": 1,
"children": [
{
"id": 17,
"title": "Blue Windoww",
"level": 2,
"children": [],
"parent_id": 12
}
],
"parent_id": 10
},
{
"id": 18,
"title": "Blue Roof",
"level": 1,
"children": [],
"parent_id": 10
},
{
"id": 13,
"title": "Wall",
"level": 1,
"children": [
{
"id": 16,
"title": "Door",
"level": 2,
"children": [],
"parent_id": 13
}
],
"parent_id": 10
}
],
"parent_id": null
}
]
Please find the solution to above problem.

first, we track the node with Id and then we update the children array like this.
(btw, your input have a missing node, 13)
const input = {
"0": [{
"id": 10,
"title": "House",
"level": 0,
"children": [],
"parent_id": null
}, {
"id": 13,
"title": "Wall",
"level": 0,
"children": [],
"parent_id": null
}],
"1": [{
"id": 12,
"title": "Red Roof",
"level": 1,
"children": [],
"parent_id": 10
},
{
"id": 18,
"title": "Blue Roof",
"level": 1,
"children": [],
"parent_id": 10
},
],
"2": [{
"id": 17,
"title": "Blue Windoww",
"level": 2,
"children": [],
"parent_id": 12
},
{
"id": 16,
"title": "Door",
"level": 2,
"children": [],
"parent_id": 13
},
]
};
const results = [];
const mapId2Node = Object.values(input).reduce((acc, vals) => {
vals.forEach(val => {
acc[val.id] = val;
if (val.parent_id === null) {
results.push(val);
}
});
return acc;
}, {});
Object.values(input).forEach(vals => {
vals.forEach(val => {
if (val.parent_id !== null) {
mapId2Node[val.parent_id].children.push(val);
}
});
});
conosle.log(results);

How to match array with comma seperated values in Javascript?

I have two arrays, one for categories and other for products. Products contain multiple categories as a comma-separated string. Now I want to match a particular category and add the matched product to an array to each category.
I want to match the category to product_category.
Here are the arrays
Products
[
{
"id": 1,
"product_title": "Product 1",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Shirts,Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-08T11:42:15.000Z"
},
{
"id": 4,
"product_title": "Product 2",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-10T07:08:23.000Z"
}
]
Categories
[
{
"id": 1,
"category_name": "Shirts",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z"
},
{
"id": 9,
"category_name": "Pents",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z"
}
]
Code that I try but not working
this.categories.forEach(cat => {
this.products.filter(prod => {
if (prod.product_category.split(',').indexOf(cat.category_name) !== -1) {
this.categories.push(prod);
}
});
});
Please help me to solve this issue.
Any solution appreciated!

You could use .map() on categories to add a products property to it. This property will be the result of a .filter() on the products.
const categoriesWithProducts = categories.map(cat => {
return {
...cat,
products: products.filter(prod => {
return prod.product_category.split(',').includes(cat.category_name);
})
};
});
``

One of the approaches is to create a new array where you would push products mapped to specific categories:
var products = [
{
"id": 1,
"product_title": "Product 1",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Shirts,Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-08T11:42:15.000Z"
},
{
"id": 4,
"product_title": "Product 2",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-10T07:08:23.000Z"
}
];
var categories = [
{
"id": 1,
"category_name": "Shirts",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z"
},
{
"id": 9,
"category_name": "Pents",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z"
}
]
var productCategories = [];
categories.forEach((cat)=> {
var productCategory = {};
productCategory.category = cat;
productCategory.products = [];
products.forEach(prod => {
if (prod.product_category.indexOf(cat.category_name) !== -1) {
productCategory.products.push(prod);
}
});
productCategories.push(productCategory);
console.log(productCategories);
});

You do not need filter(), you can use another forEach() with includes() and Object.assign():
var products = [
{
"id": 1,
"product_title": "Product 1",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Shirts,Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-08T11:42:15.000Z"
},
{
"id": 4,
"product_title": "Product 2",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-10T07:08:23.000Z"
}
];
var categories = [
{
"id": 1,
"category_name": "Shirts",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z"
},
{
"id": 9,
"category_name": "Pents",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z"
}
]
categories.forEach((cat,i) => {
products.forEach(prod => {
if (prod.product_category.split(',').includes(cat.category_name)) {
Object.assign(categories[i], prod);
}
});
});
console.log(categories);

You can use Array#filter to filter products on catagory names using Array#some
let products = [{"id":1,"product_title":"Product 1","product_size":null,"product_author":5,"description":"Test Description","product_category":"Shirts,Pents,Salwar","createdAt":"2020-02-08T11:42:15.000Z","updatedAt":"2020-02-08T11:42:15.000Z"},{"id":4,"product_title":"Product 2","product_size":null,"product_author":5,"description":"Test Description","product_category":"Pents,Salwar","createdAt":"2020-02-08T11:42:15.000Z","updatedAt":"2020-02-10T07:08:23.000Z"}]
let catagories = [{"id":1,"category_name":"Shirts","createdAt":"2020-02-08T04:59:59.000Z","updatedAt":"2020-02-10T06:50:05.000Z"},{"id":9,"category_name":"Pents","createdAt":"2020-02-08T04:59:59.000Z","updatedAt":"2020-02-10T06:50:05.000Z"}]
let catagoryNames = new Set(catagories.map(e => e.category_name));
let filtered = [...products].filter(e => e.product_category.split(',').some(cat => catagoryNames.has(cat)));
console.log(filtered)

Try this
categories.forEach(function(c){
c.products=products.filter(function(p){
var reg=new RegExp(c.category_name,'gi');
return reg.test(p.product_category)
})
})
Without Regex
categories.forEach(function(c){
c.products=products.filter(function(p){
return (p.product_category.split(',').indexOf(c.category_name)!==-1)
})
})
You will get the products inside each category
Fiddle here

Try this code.I hope it will helps you.
product = [
{
"id": 1,
"product_title": "Product 1",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Shirts,Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-08T11:42:15.000Z"
},
{
"id": 4,
"product_title": "Product 2",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-10T07:08:23.000Z"
}
]
categories=[
{
"id": 1,
"category_name": "Shirts",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z",
},
{
"id": 9,
"category_name": "Pents",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z",
}
]
this.categories.forEach(cat => {
cat['product'] = []
this.product.filter(prod => {
if (prod.product_category.split(',').indexOf(cat.category_name) !== -1) {
cat['product'].push(prod);
}
});
});
console.log(this.categories)

You can easily loop through all categories and then loop throgh all products. For each product check if category name is present and if so add product to category products:
this.categories.forEach(cat => {
cat.products = [];
this.products.forEach(prod => {
if (prod.product_category.split(',').indexOf(cat.category_name) !== -1) {
cat.products.push(prod);
}
});
});
Please note that I changed filter to forEach.

const products = [
{
"id": 1,
"product_title": "Product 1",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Shirts,Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-08T11:42:15.000Z"
},
{
"id": 4,
"product_title": "Product 2",
"product_size": null,
"product_author": 5,
"description": "Test Description",
"product_category": "Pents,Salwar",
"createdAt": "2020-02-08T11:42:15.000Z",
"updatedAt": "2020-02-10T07:08:23.000Z"
}
];
const categories = [
{
"id": 1,
"category_name": "Shirts",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z"
},
{
"id": 9,
"category_name": "Pents",
"createdAt": "2020-02-08T04:59:59.000Z",
"updatedAt": "2020-02-10T06:50:05.000Z"
}
];
const matchedProducts = [];
products.map(prod=>{
const isCateoryMatched = categories.some(c=>{
return prod.product_category.includes(c.category_name)
});
if(isCateoryMatched ){
matchedProducts.push(prod);
}
})
//if you want to push the matched products into categories
categories.push(...matchedProducts)
console.log('matchedProducts',matchedProducts);
console.log('categories',categories);

What is the best way to join two json files in angular?

I have a json file which contains the list of products.
[{"id":76,
"name":"A",
"description":"abc",
"price":199,
"imageUrl":"image.jpg",
"productCategory":[{
"categoryId":5,
"category":null
},{
"categoryId":6,
"category":null
}
]}
I then have a second json file with a list of categories which look like so:
[{"id":5,"name":"red"},
{"id":6,"name”:"blue"}]
What is the best way to join the categories of this two json files in Angular?
This is what I aim to achieve:
[{"id":76,
"name":"A",
"description":"abc",
"price":199,
"imageUrl":"image.jpg",
"productCategory":[{
"categoryId":5,
"category":red
},{
"categoryId":6,
"category":blue
}
]}

You can use filter function for your requirement as below
let products = [{
"id": 76,
"name": "A",
"description": "abc",
"price": 199,
"imageUrl": "image.jpg",
"productCategory": [{
"categoryId": 2,
"category": null
}, {
"categoryId": 1,
"category": null
}]
}, {
"id": 77,
"name": "B",
"description": "abcd",
"price": 1997,
"imageUrl": "image.jpg",
"productCategory": [{
"categoryId": 5,
"category": null
}, {
"categoryId": 6,
"category": null
}]
},
{
"id": 78,
"name": "C",
"description": "abcde",
"price": 1993,
"imageUrl": "image.jpg",
"productCategory": [{
"categoryId": 4,
"category": null
}, {
"categoryId": 6,
"category": null
}]
}];
let category = [{ "id": 5, "name": "red" }, { "id": 6, "name": "blue" }]
let result = products.filter(p => {
var exist = p.productCategory.filter(pc => category.find(c => c.id == pc.categoryId))[0];
return exist;
});
console.log(result);
let products = [{
"id": 76,
"name": "A",
"description": "abc",
"price": 199,
"imageUrl": "image.jpg",
"productCategory": [{
"categoryId": 2,
"category": null
}, {
"categoryId": 1,
"category": null
}]
}, {
"id": 77,
"name": "B",
"description": "abcd",
"price": 1997,
"imageUrl": "image.jpg",
"productCategory": [{
"categoryId": 5,
"category": null
}, {
"categoryId": 6,
"category": null
}]
},
{
"id": 78,
"name": "C",
"description": "abcde",
"price": 1993,
"imageUrl": "image.jpg",
"productCategory": [{
"categoryId": 4,
"category": null
}, {
"categoryId": 6,
"category": null
}]
}];
let category = [{ "id": 5, "name": "red" }, { "id": 6, "name": "blue" }]
let result = products.filter(p => {
var exist = p.productCategory.filter(pc => category.find(c => c.id == pc.categoryId))[0];
return exist;
});
console.log(result);

I make a stackblitz that use a service to retreive the data. Yes, the way is using switchMap and map. SwitchMap receive an array and must return an observable. with map, we transform the data received and return the data transformed
this.dataService.getCategories().pipe(
//first get the categories, the categories is in the
//variable cats
switchMap((cats:any[])=>{
return this.dataService.getProducts().pipe(map((res:any[])=>{
res.forEach(p=>{ //with each product
p.productCategory.forEach(c=>{ //with each productCategory in product
//equals a propertie "category" to the propertie "name" of the cats
c.category=cats.find(x=>x.id==c.categoryId).name
})
})
return res
}))
})).subscribe(res=>{
console.log(res)
})
If only has an unique product we can make
this.dataService.getCategories().pipe(
switchMap((cats:any[])=>{
return this.dataService.getUniqProduct(2).pipe(map((res:any)=>{
res.productCategory.forEach(c=>{
c.category=cats.find(x=>x.id==c.categoryId).name
})
return res
}))
})).subscribe(res=>{
console.log(res)
})
We can improve our dataService "cached" the categories
getCategories() {
if (this.categories)
return of(this.categories);
return http.get(......).pipe(tap(res=>{
this.categories=res;
}))
}
NOTE:In the stackbit I simulate the call to an http.get(...) using "of"