We Keep Coding

Return name and id property value of all arrays inside object

How to return name and id property value of all arrays? The idea is to make a single map of all these arrays and return the id and name?
Something like this
filters.[key].map((option, index) => (
<ItemFilter key={index}>{option}</ItemFilter>
))
I have this array object
filters: {
"services": [
{
"id": "1b975589-7111-46a4-b433-d0e3c0d7c08c",
"name": "Bank"
},
{
"id": "91d4637e-a17f-4b31-8675-c041fe06e2ad",
"name": "Income"
}
],
"accountTypes": [
{
"id": "1f34205b-2e5a-430e-982c-5673cbdb3a68",
"name": "Digital Account"
}
],
"channels": [
{
"id": "875f8350-073e-4a20-be20-38482a86892b",
"name": "Chat"
}
]
}

You can use flatMap or flat to achieve the desired result.
Object.values(obj.filters).flatMap(v => v)
or
Object.values(obj.filters).flat()
const obj = {
filters: {
services: [
{
id: "1b975589-7111-46a4-b433-d0e3c0d7c08c",
name: "Bank",
},
{
id: "91d4637e-a17f-4b31-8675-c041fe06e2ad",
name: "Income",
},
],
accountTypes: [
{
id: "1f34205b-2e5a-430e-982c-5673cbdb3a68",
name: "Digital Account",
},
],
channels: [
{
id: "875f8350-073e-4a20-be20-38482a86892b",
name: "Chat",
},
],
},
};
const result = Object.values(obj.filters).flatMap(v => v);
console.log(result);

If option is referring to name in your example code it could look something like this:
Object.values(
{
filters: {
services: [
{
id: "1b975589-7111-46a4-b433-d0e3c0d7c08c",
name: "Bank",
},
{
id: "91d4637e-a17f-4b31-8675-c041fe06e2ad",
name: "Income",
},
],
accountTypes: [
{
id: "1f34205b-2e5a-430e-982c-5673cbdb3a68",
name: "Digital Account",
},
],
channels: [
{
id: "875f8350-073e-4a20-be20-38482a86892b",
name: "Chat",
},
],
},
}.filters
)
.flat()
.map(({ name, index }) => <ItemFilter key={index}>{name}</ItemFilter>);

Converting parent / children structure to object

I need to convert js object like this:
{
"id": 1,
"name": "A",
"parent": null,
"children": [
{
"id": 2,
"name": "B",
"parent": 1,
"children": []
},
{
"id": 3,
"name": "C",
"parent": 1,
"children": [
{
"id": 4,
"name": "D",
"parent": 3,
"children": []
}
]
}
]
}
to another like this:
{
"А": [
{
"B": "value",
"C": [
{
"D": "value"
}
]
}
]
}
I wrote the function, but it returns the wrong object with several nested arrays:
const convert = (obj) => {
return obj.map((i) => {
return Object.keys(i).filter(y => y === 'name').map(key => {
return i['children'].length > 0 ? { [i[key]]: convert(i['children']) } : { [i[key]]: 'value' }
});
})
};
How to change my implementation for getting the right object?

You could build the entries from objects and map nested children, if exists.
const
transform = array => Object.fromEntries(array.map(({ name, children }) =>
[name, children.length ? [transform(children)] : 'value']
)),
data = { id: 1, name: "A", parent: null, children: [{ id: 2, name: "B", parent: 1, children: [] }, { id: 3, name: "C", parent: 1, children: [{ id: 4, name: "D", parent: 3, children: [] }] }] },
result = transform([data]);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Converting JavaScript Array to JSON object

I am trying to write a for or JQuery. Each loop so that It will generate a new JSON Object from an array in a desired format. I want to output a JSON Object from an input JavaScript Array. I have a following input array to convert:
INPUT:
[
{
"parent": "parent_1",
"child": "abc",
"data": "data1"
},
{
"parent": "parent_1",
"child": "def",
"data": "data2"
},
{
"parent": "parent_1",
"child": "ghi",
"data": "data3"
},
{
"parent": "parent_2",
"child": "jkl",
"data": "data4"
},
{
"parent": "parent_2",
"child": "acc",
"data": "data5"
},
{
"parent": "parent_3",
"child": "mjh",
"data": "data6"
},
{
"parent": "parent_3",
"child": "fg1",
"data": "data7"
},
{
"parent": "parent_2",
"child": "dfg",
"data": "data8"
},
{
"parent": "parent_3",
"child": "jkk",
"data": "data9"
},
{
"parent": "parent_4",
"child": "3ff",
"data": "data10"
},
{
"parent": "parent_3",
"child": "mhg",
"data": "data11"
},
{
"parent": "parent_1",
"child": "gnh",
"data": "data12"
}
]
so from above array want to run a for or JQuery. Each loop so that it will generate a new JSON Object in the following format:
OUTPUT:
[
{
"parent_1": {
"child": [
{
"name": "abc",
"data": "data1"
},
{
"name": "def",
"data": "data2"
},
{
"name": "gh1",
"data": "data3"
},
{
"name": "gnh",
"data": "data12"
}
]
}
},
{
"parent_2": {
"child": [
{
"name": "jkl",
"data": "data4"
},
{
"name": "acc",
"data": "data5"
},
{
"name": "dfg",
"data": "data8"
}
]
}
},
{
"parent_3": {
"child": [
{
"name": "mjh",
"data": "data6"
},
{
"name": "fg1",
"data": "data7"
},
{
"name": "jkk",
"data": "data9"
},
{
"name": "mhg",
"data": "data11"
}
]
}
},
{
"parent_4": {
"child": [
{
"name": "3ff",
"data": "data10"
}
]
}
}
]

You could group the data by using parent as key for an object and add the rest of the object to the children array of the group.
This approach does not muate the given data.
const
data = [{ parent: "parent_1", child: "abc", data: "data1" }, { parent: "parent_1", child: "def", data: "data2" }, { parent: "parent_1", child: "ghi", data: "data3" }, { parent: "parent_2", child: "jkl", data: "data4" }, { parent: "parent_2", child: "acc", data: "data5" }, { parent: "parent_3", child: "mjh", data: "data6" }, { parent: "parent_3", child: "fg1", data: "data7" }, { parent: "parent_2", child: "dfg", data: "data8" }, { parent: "parent_3", child: "jkk", data: "data9" }, { parent: "parent_4", child: "3ff", data: "data10" }, { parent: "parent_3", child: "mhg", data: "data11" }, { parent: "parent_1", child: "gnh", data: "data12" }],
result = Object.values(data.reduce((r, { parent, ...o }) => {
r[parent] ??= { [parent]: { children: [] } };
r[parent][parent].children.push(o);
return r;
}, []));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

I think you want something like this
const convertArray = (arr, field) => {
const obj = {};
arr.forEach(elem => {
const param = elem[field];
if (!Array.isArray(obj[param])) obj[param] = [];
delete elem[field];
obj[param].push(elem);
});
return Object.keys(obj).map(elem => {
return { [elem]: { child: obj[elem] } };
});
}
then you would use as
convertArray(*array*, "parent")

You can use .reduce function, for example:
var array = [ {name: 'item 1', cate: 'cate-1'}, {name: 'item 2', cate: 'cate-2'} ]
var object = array.reduce(function(obj, item) {
if (!obj[item.cate]) obj[item.cate] = {child: []};
obj[item.cate].child.push(item);
return obj;
}, {})
console.log(object);

You can use the below code for this.
var arr = [{"parent":"parent_1","child":"abc","data":"data1"},{"parent":"parent_1","child":"def","data":"data2"},{"parent":"parent_1","child":"ghi","data":"data3"},{"parent":"parent_2","child":"jkl","data":"data4"},{"parent":"parent_2","child":"acc","data":"data5"},{"parent":"parent_3","child":"mjh","data":"data6"},{"parent":"parent_3","child":"fg1","data":"data7"},{"parent":"parent_2","child":"dfg","data":"data8"},{"parent":"parent_3","child":"jkk","data":"data9"},{"parent":"parent_4","child":"3ff","data":"data10"},{"parent":"parent_3","child":"mhg","data":"data11"},{"parent":"parent_1","child":"gnh","data":"data12"}];
var result = {};
$.each(arr, function (i, item) {
if(!result[item.parent]) {
result[item.parent] = [];
}
var data = {'child': {'name': item.child, 'data': item.data}};
(result[item.parent]).push(data);
});
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript iterate over objects in nested array of objects and filter by ids and return the same original dataset updated

I have an array of nested objects, that i want to keep the objects in items that have the id equal to one in the filter list that i have as reference.
const data = [{
"otherStuff": "otherB",
"items": {
"item1": [{
"id": "id1",
"info": "info1"
},
{
"id": "id2",
"info": "info22"
}
],
"item20": [{
"id": "id3",
"info": "info5"
}],
"item5": [{
"id": "id4",
"info": "info6"
},
{
"id": "id5",
"info": "info7"
}
]
}
}, {
"otherStuff": "otherA",
"items": {
"item1": [{
"id": "id1",
"info": "info10000"
},
{
"id": "id2",
"info": "info220000"
}
],
"item20": [{
"id": "id3",
"info": "info5000"
}],
"item5": [{
"id": "id4",
"info": "info60000"
},
{
"id": "id5",
"info": "info7000"
}
]
}
}];
const keep = ['id4', 'id2'];
keep.forEach(function(val) {
data.forEach(function(entry, index){
const entrySelected = [];
Object.keys(entry.items).forEach(item => {
var match = entry.items[item].find(obj => obj.id === val);
if (match) {
entrySelected.push(match)
}
});
data[index].items = entrySelected;
});
})
console.log(data)
I am getting an error right now,
but the idea is to get the following output:
[
{
"otherStuff": "otherB",
"items": [
{
"id": "id2",
"info": "info22"
},
{
"id": "id4",
"info": "info6"
}
]
},
{
"otherStuff": "otherA",
"items": [
{
"id": "id2",
"info": "info220000"
},
{
"id": "id4",
"info": "info60000"
}
]
}
]
how can i achieve this?

You could iterate the values of the objects and then reduce the wanted items for a new array. Later assing this to items.
var data = [{ otherStuff: "otherB", items: { item1: [{ id: "id1", info: "info1" }, { id: "id2", info: "info22" }], item20: [{ id: "id3", info: "info5" }], item5: [{ id: "id4", info: "info6" }, { id: "id5", info: "info7" }] } }, { otherStuff: "otherA", items: { item1: [{ id: "id1", info: "info10000" }, { id: "id2", info: "info220000" }], item20: [{ id: "id3", info: "info5000" }], item5: [{ id: "id4", info: "info60000" }, { id: "id5", info: "info7000" }] } }],
keep = ['id4', 'id2'];
data.forEach(o =>
o.items = Object
.keys(o.items)
.reduce((r, k) => o
.items[k]
.reduce((s, p) => s.concat(keep.includes(p.id) ? p : []), r), []));
console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }
With a filter for arrays.
var data = [{ otherStuff: "otherB", items: { item1: [{ id: "id1", info: "info1" }, { id: "id2", info: "info22" }], item20: [{ id: "id3", info: "info5" }], item5: [{ id: "id4", info: "info6" }, { id: "id5", info: "info7" }] } }, { otherStuff: "otherA", items: { item1: [{ id: "id1", info: "info10000" }, { id: "id2", info: "info220000" }], item20: [{ id: "id3", info: "info5000" }], item5: [{ id: "id4", info: "info60000" }, { id: "id5", info: "info7000" }] } }],
keep = ['id4', 'id2'];
data.forEach(o =>
o.items = Object
.keys(o.items)
.filter(k => Array.isArray(o.items[k]))
.reduce((r, k) => o
.items[k]
.reduce((s, p) => s.concat(keep.includes(p.id) ? p : []), r), []));
console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }

create new json from existing json using AngularJS or Javascript

Category JSON
I am getting this JSON by accessing API and soring it in $scope.categoryList
[
{
"id": 1,
"name": "Men"
},
{
"id": 2,
"name": "Women"
},
{
"id": 3,
"name": "Kids"
}
]
SubCategory JSON
I am getting this JSON by accessing API and soring it in $scope.subCategoryList
[
{
"id": 1,
"category_id": 1,
"name": "Footwear"
},
{
"id": 2,
"category_id": 2,
"name": "Footwear"
},
{
"id": 3,
"category_id": 1,
"name": "Cloths"
}
]
I need to design this in below format
[
{
"categoryId" : 1,
"categoryName" : "Men",
"subCategory" : [
{
"subCategoryId": 1,
"subCategoryName": "Footwear"
},
{
"subCategoryId": 3,
"subCategoryName": "Cloths"
},
]
},
{
"categoryId" : 2,
"categoryName" : "Women",
"subCategory" : [
{
"subCategoryId": 2,
"subCategoryName": "Footwear"
}
]
},
{
"categoryId" : 3,
"categoryName" : "Kids",
"subCategory" : []
}
]
I have the code but it is not showing perfect data
$scope.catSubCat = []
angular.forEach($scope.subcategoryList, function(subValue, subKey) {
$scope.subCat = {
'subCategoryId' : '',
'subCategoryName' : ''
}
angular.forEach($scope.categoryList, function(catValue, catKey) {
if(subValue.category_id == catValue.id) {
$scope.subCat.subCategoryId = subValue.id;
$scope.subCat.subCategoryName = subValue.name;
$scope.subCategory = {
'categoryId' : '',
'categoryName' : '',
'subCatName' : []
}
$scope.catVal.categoryId = subValue.category_id;
$scope.catVal.categoryName = catValue.name;
$scope.catVal.subCatName.push($scope.subCat);
}
$scope.catSubCat.push($scope.catVal);
});
});

This should do the trick. Not as clean as 31piy's (wow!) but more efficient. (O(N + M) as opposed to O(N * M))
const categoryList = [
{
"id": 1,
"name": "Men"
},
{
"id": 2,
"name": "Women"
},
{
"id": 3,
"name": "Kids"
}
];
const subCategoryList = [
{
"id": 1,
"category_id": 1,
"name": "Footwear"
},
{
"id": 2,
"category_id": 2,
"name": "Footwear"
},
{
"id": 3,
"category_id": 1,
"name": "Cloths"
}
];
const mergeCategoryLists = (categoryList, subCategoryList) => {
// Turn categoryList into an object with categoryId as key
const categoryById = {};
categoryList.forEach((category) => {
categoryById[category.id] = {
categoryName: category.name,
categoryId: category.id,
subCategory: []
};
});
// Add subcategories
subCategoryList.forEach((subCategory) => {
const formattedSubCategory = {
subCategoryId: subCategory.id,
subCategoryName: subCategory.name
};
categoryById[subCategory.category_id].subCategory.push(formattedSubCategory);
});
// Convert categoryById into desired format
return Object.values(categoryById);
};
console.log(mergeCategoryLists(categoryList, subCategoryList));

Check out this logic .
$scope.newArray = angular.copy($scope.categoryList);
$scope.catSubCat = []
angular.forEach($scope.subcategoryList, function(subValue, subKey) {
$scope.subCat = {
'subCategoryId' : '',
'subCategoryName' : ''
}
angular.forEach($scope.newArray, function(catValue, catKey) {
$scope.subCat.subCategoryId = subValue.id;
$scope.subCat.subCategoryName = subValue.name;
if(subValue.category_id == catValue.id) {
if(catValue.subCatName.hasOwnProperty('bye')){
$scope.newArray[catKey].subCatName = [];
$scope.newArray[catKey].subCatName.push($scope.subCat);
}else{
$scope.newArray[catKey].subCatName.push($scope.subCat);
}
}
});
});
Resultant will we in $scope.newArray

You can use Array#map in combination with Array#filter to achieve the desired results:
var categories = [{
"id": 1,
"name": "Men"
},
{
"id": 2,
"name": "Women"
},
{
"id": 3,
"name": "Kids"
}
];
var subcategories = [{
"id": 1,
"category_id": 1,
"name": "Footwear"
},
{
"id": 2,
"category_id": 2,
"name": "Footwear"
},
{
"id": 3,
"category_id": 1,
"name": "Cloths"
}
];
var result = categories.map(cat => {
return {
categoryId: cat.id,
categoryName: cat.name,
subCategory: subcategories
.filter(subc => subc.category_id === cat.id)
.map(subc => {
return {
subCategoryId: subc.id,
subCategoryName: subc.name
};
})
};
});
console.log(result);

var categoryList = [{
"id": 1,
"name": "Men"
}, {
"id": 2,
"name": "Women"
}, {
"id": 3,
"name": "Kids"
}];
var subCategoryList = [{
"id": 1,
"category_id": 1,
"name": "Footwear"
}, {
"id": 2,
"category_id": 2,
"name": "Footwear"
}, {
"id": 3,
"category_id": 1,
"name": "Cloths"
}];
var finalJson = [];
for (var i = 0; i < categoryList.length; i++) {
var obj = {
categoryId: categoryList[i].id,
categoryName: categoryList[i].name,
subCategory: []
};
var subCat = subCategoryList.filter(function(word) {
return word.category_id === categoryList[i].id;
});
for (var j = 0; j < subCat.length; j++) {
var obj2 = {
subCategoryId: subCat[j].id,
subCategoryName: subCat[j].name
};
obj.subCategory.push(obj2);
}
finalJson.push(obj);
}
console.log(finalJson);
Pure Javascript solution to your question, you can replace with
Angular Syntax then..

Use following code:
$scope.catSubCat = []
angular.forEach($scope.categoryList, function(catValue, catKey) {
var catObj = {
'categoryId' : '',
'categoryName' : '',
'subCatName' : []
}
catObj.categoryId = catValue.id;
catObj.categoryId = catValue.name;
angular.forEach($scope.subcategoryList, function(subValue, subKey) {
if(subValue.category_id == catValue.id) {
var subCatObj = {
'subCategoryId' : '',
'subCategoryName' : ''
}
subCatObj.subCategoryId = subValue.category_id;
subCatObj.subCategoryName = catValue.name;
catObj.subCatName.push(subCatObj);
}
});
$scope.catSubCat.push(catObj);
});