I am trying to create multiple arrays of objects with each keys inside the object.
How can I generate my expected output (shown below the initial array)?
Initial array:
[{
title: 'Linus tech tips',
name: 'Linus',
id: 'SA946',
},
{
title: 'Linus tech tips',
name: 'Colton',
id: 'SA947',
}
];
Expected output:
[{
text: 'Linus tech tips',
}, {
text: 'Linus',
}, {
text: 'SA946',
}, ],
[{
text: 'Linus tech tips',
}, {
text: 'Colton',
}, {
text: 'SA947',
}, ],
You can use array.map to achieve that. Please have a look:
const initial = [
{
title: 'Linus tech tips',
name: 'Linus',
id: 'SA946',
},
{
title: 'Linus tech tips',
name: 'Colton',
id: 'SA947',
},
];
const expected = initial.map(
(item) => Object.values(item).map(
(itemValue) => ({ text: itemValue }),
),
);
console.log(expected);
You need to iterate over the keys, then flatten the array.
[{
title: 'Linus tech tips',
name: 'Linus',
id: 'SA946',
},
{
title: 'Linus tech tips',
name: 'Colton',
id: 'SA947',
}].map(
item => {
return Object.keys(item).map(
key => {
return {text: item[key]}
}
)
}
).flat()
[
{
"text": "Linus tech tips"
},
{
"text": "Linus"
},
{
"text": "SA946"
},
{
"text": "Linus tech tips"
},
{
"text": "Colton"
},
{
"text": "SA947"
}
]
Or, if you want to have the items separated, do not use flat() at the end:
[
[
{
"text": "Linus tech tips"
},
{
"text": "Linus"
},
{
"text": "SA946"
}
],
[
{
"text": "Linus tech tips"
},
{
"text": "Colton"
},
{
"text": "SA947"
}
]
]
Related
This is my array, I'm working on react app
const categoryObj = [
{
id: "463e989a-c4f2-4616-85c5-0cb610c5fff0",
name: "Women",
subCategory: [
{
id: "91ba7308-b68e-4d0c-85d8-0cc8272c6bc8",
name: "All",
icon: "AllIcon"
},
{
id: "0e0712c5-0b5a-4d4e-acf5-3d7faf2caa2a",
name: "Clothes",
icon: "ClothesIcon",
sections: [
{
id: "9b7a7a58-04a1-4aba-ba68-0e6b1390021e",
name: "All",
href: "Women/Clothes/All".split(' ').join('-').trim().toLowerCase()
}
]
}
]
}
]
how can I access "women" in this array ? (I have many items like "women" this is just a sample of a large array. if you can suggest a mapping method it's better.)
You can map through it to get the name value in this way:
categoryObj.map((category) => category.name)
const categoryObj = [
{
id: "463e989a-c4f2-4616-85c5-0cb610c5fff0",
name: "Women",
subCategory: [
{
id: "91ba7308-b68e-4d0c-85d8-0cc8272c6bc8",
name: "All",
icon: "AllIcon"
},
{
id: "0e0712c5-0b5a-4d4e-acf5-3d7faf2caa2a",
name: "Clothes",
icon: "ClothesIcon",
sections: [
{
id: "9b7a7a58-04a1-4aba-ba68-0e6b1390021e",
name: "All",
href: "Women/Clothes/All".split(' ').join('-').trim().toLowerCase()
}
]
}
]
},
{
id: "463e989a-c4f2-4616-85c5-0cb610c5fff0",
name: "Men",
subCategory: [
{
id: "91ba7308-b68e-4d0c-85d8-0cc8272c6bc8",
name: "All",
icon: "AllIcon"
},
{
id: "0e0712c5-0b5a-4d4e-acf5-3d7faf2caa2a",
name: "Clothes",
icon: "ClothesIcon",
sections: [
{
id: "9b7a7a58-04a1-4aba-ba68-0e6b1390021e",
name: "All",
href: "Women/Clothes/All".split(' ').join('-').trim().toLowerCase()
}
]
}
]
},
{
id: "463e989a-c4f2-4616-85c5-0cb610c5fff0",
name: "Children",
subCategory: [
{
id: "91ba7308-b68e-4d0c-85d8-0cc8272c6bc8",
name: "All",
icon: "AllIcon"
},
{
id: "0e0712c5-0b5a-4d4e-acf5-3d7faf2caa2a",
name: "Clothes",
icon: "ClothesIcon",
sections: [
{
id: "9b7a7a58-04a1-4aba-ba68-0e6b1390021e",
name: "All",
href: "Women/Clothes/All".split(' ').join('-').trim().toLowerCase()
}
]
}
]
}
]
const result = categoryObj.filter(obj => obj.name === 'Women')
console.log('multi objects :', result)
// if unique with name
const resultUnique = categoryObj.find(obj => obj.name === 'Women')
console.log('unique object :', resultUnique)
This object contains an object and have another variations as sub. If you want to access first name,
categoryObj.map((it) => {
//You can handle it like this
console.log(it.name)
})
But if you want all name of all subCategory,
categoryObj[0].subCategory.map((cat) => {
//You can handle it like this
console.log(cat.name)
})
You have same object-type in and out.
const res = categoryObj.filter(item=>item.name === 'Women');
Hi guys i have created the following array of objects . And to be honest i am a little bit lost . But please take a look and help me out
[
{
name: "bananaLight",
bananaDefinition: [
{
bananaRef: 'startBanana',
title: 'Start Banana'
},
{
bananaRef: 'endBanana',
title: 'End Banana'
}
]
},
{
name: "bananaFull",
bananaDefinition: [
{
bananaRef: 'bananaSize'
title: 'Banana Size'
},
{
bananaRef: 'startBanana',
title: 'Start Banana'
},
{
bananaRef: 'endBanana',
title: 'End Banana'
}
]
}
]
The idea here is to fetch the array of bananaDefinition bounded with the name bananaLight
You can use find():
const bananaArray = [{
name: "bananaLight",
bananaDefinition: [{
bananaRef: 'startBanana',
title: 'Start Banana'
}, {
bananaRef: 'endBanana',
title: 'End Banana'
}]
}, {
name: "bananaFull",
bananaDefinition: [{
bananaRef: 'bananaSize',
title: 'Banana Size'
}, {
bananaRef: 'startBanana',
title: 'Start Banana'
}, {
bananaRef: 'endBanana',
title: 'End Banana'
}]
}];
const result = bananaArray.find(v => v.name === 'bananaLight').bananaDefinition;
console.log(result);
Based on what you want to do you might want to get it from different ways. here is some of them:
const dataArray = [
{
name: "bananaLight",
bananaDefinition: [
{
bananaRef: "startBanana",
title: "Start Banana",
},
{
bananaRef: "endBanana",
title: "End Banana",
},
],
},
{
name: "bananaFull",
bananaDefinition: [
{
bananaRef: "bananaSize",
title: "Banana Size",
},
{
bananaRef: "startBanana",
title: "Start Banana",
},
{
bananaRef: "endBanana",
title: "End Banana",
},
],
},
];
1
const bananaLightFind = dataArray.find((item) => item.name === "bananaLight");
2
const foundIndex = dataArray.findIndex(item => item.name === "bananaLight")
const bananaLightFindIndex = dataArray[foundIndex];
3
let bananaLightLoop;
dataArray.forEach((item) => {
if (item.name === "bananaLight") {
bananaLightLoop = item;
}
});
I have got two arrays of objects. I want to filter data based on PermissionObj.
This is coming from database. Here are arrays of sub-arrays in the permissionObj.
const PermissionObj = {
permission: [
{
books: [
{
label: "Can View",
value: "can_view"
}
]
},
{
Journals: [
{
label: "Can View",
value: "can_view"
},
{
label: "Can Create",
value: "can_create"
}
]
},
{
deal: [
{
label: "Can update",
value: "can_update"
},
{
label: "Can delete",
value: "can_delete"
}
]
}
]
}
this is static data. I want to compare this data based on PermissionObj.
const data = [
{
label: "books",
value: "can_view"
},
{
label: "deal",
content: [
{
value: "can_update"
},
{
value: "can_delete"
},
{ value: "can_view" }
]
},
{
label: "Articles"
},
{
label: "Journals",
content: [
{
value: "can_create"
},
{
value: "can_view"
},
{
value: "can_delete"
},
{
value: "can_edit"
}
]
}
]
I am trying to filter the data array of the object based on PermissionObj array of objects. here is my trying code.
const permKeys = PermissionObj.permission.flatMap(item => Object.keys(item));
const filteredData = data.filter(({ label }) => permKeys.includes(label));
console.log(filteredData);
Here is my problem, I have been faced is that I don't want to get can_edit, can_delete if it doesn't match with permission objects in journals. In my permission objects, There is no can_edit and can_delete in journals.
My accepted Output would be this format :
const data = [
{
label: "books",
value: "can_view"
},
{
label: "deal",
content: [
{
value: "can_update"
},
{
value: "can_delete"
}
]
},
{
label: "Journals",
content: [
{
value: "can_create"
},
{
value: "can_view"
}
]
}
]
It is possible to use reduce method and apply logic to decide what data should be pushed:
const result = data.reduce((a, c) => {
let filterObj = PermissionObj.permission.find(f => f[c.label]);
if (filterObj) {
if (c.value) {
a.push(c);
}
if (c.content) {
c.content = c.content.filter(f => filterObj[c.label]
.some(s => s.value.toLowerCase() == f.value.toLowerCase()));
a.push(c);
}
}
return a;
},[])
An example:
const PermissionObj = {
permission: [
{
"books": [
{
"label": "Can View",
"value": "can_view"
}
]
},
{
"Journals": [
{
"label": "Can View",
"value": "can_view"
},
{
"label": "Can Create",
"value": "can_create"
}
]
},
{
"deal": [
{
"label": "Can update",
"value": "can_update"
},
{
"label": "Can delete",
"value": "can_delete"
}
]
}
]
};
const data = [
{
label: "books",
value: "can_view"
},
{
label: "deal",
content: [
{
value: "can_update"
},
{
value: "can_delete"
},
{
value:"can_view"
}
]
},
{
label: "Articles",
},
{
label: "Journals",
content: [
{
value: "can_create"
},
{
value: "can_view"
},
{
value: "can_delete"
},
{
value: "can_edit"
}
]
}
];
const result = data.reduce((a, c) => {
let filterObj = PermissionObj.permission.find(f => f[c.label]);
if (filterObj) {
if (c.value) {
a.push(c);
}
if (c.content) {
c.content = c.content.filter(f => filterObj[c.label].some(s => s.value.toLowerCase() == f.value.toLowerCase()));
a.push(c);
}
}
return a;
},[])
console.log(result);
How to group multidimensional array objects by value in the component.
I need to group array by page and get the text for every page. I tray to use the map and reduce it but don't get good results. I work on react-native project. JS function groups doesn't work for some reason.
What is the best way to write code for this array?
I have this array:
[
{
number: 1,
englishName: 'Name 1',
items: [
{
text: 'Some text',
page: 1,
},
{
text: 'Some text',
page: 1,
},
],
},
{
number: 2,
englishName: 'Name 2',
items: [
{
text: 'Some text',
page: 2,
},
{
text: 'Some text',
page: 2,
},
],
},
{
number: 3,
englishName: 'Name 3',
items: [
{
text: 'Some text',
page: 3,
},
{
text: 'Some text',
page: 4,
},
],
},
]
I need an array like this
[
{
'page 1': [
{
text: 'Some text',
englishName: 'Name 1',
},
{
text: 'Some text',
englishName: 'Name 2',
},
],
},
{
'page 2': [
{
text: 'Some text',
englishName: 'Name 2',
},
{
text: 'Some text',
englishName: 'Name 2',
},
],
},
....
]
Seems like this will work for you.
This will give you an object:
const allPages = array.reduce((acc, curr) => {
curr.items.forEach((page) => {
var pageKey = `page ${page.page}`
if(!acc[pageKey]){
acc[pageKey] = []
}
acc[pageKey].push({ text: page.text, englishName: curr.englishName })
})
return acc
}, {})
You can convert that object into an array as well:
const finalArr = Object.entries(allPages).map(([page, array]) => {
return {
[page]: array
}
})
See example:
var array = [{
"number": 1,
"englishName": "Name 1",
"items": [
{
"text": "Some text",
"page": 1,
},
{
"text": "Some text",
"page": 1,
}
]
},
{
"number": 2,
"englishName": "Name 2",
"items": [
{
"text": "Some text",
"page": 2,
},
{
"text": "Some text",
"page": 2,
}
]
},
{
"number": 3,
"englishName": "Name 3",
"items": [
{
"text": "Some text",
"page": 3,
},
{
"text": "Some text",
"page": 4,
}
]
}
]
const allPages = array.reduce((acc, curr) => {
curr.items.forEach((page) => {
var pageKey = `page ${page.page}`
if(!acc[pageKey]){
acc[pageKey] = []
}
acc[pageKey].push({ text: page.text, englishName: curr.englishName })
})
return acc
}, {})
const finalArr = Object.entries(allPages).map(([page, array]) => {
return {
[page]: array
}
})
console.log(allPages)
console.log(finalArr)
In my Angular app, I'm using AngularTree directive (http://wix.github.io/angular-tree-control) to render a tree view of the following data structure, as shown in https://jsfiddle.net/eugene_goldberg/Lvwxx629/17/:
$scope.subjectAreas = [
{
name: "Area-1",
link: "dashboards.dashboard_1",
entities: [
{
name: "entity 1"
},
{
name: "entity 2"
}
],
offerings: [
{
name: "offering 1"
},
{
name: "offering 2"
}
]
},
{
name: "Area-2",
link: "dashboards.dashboard_1",
entities: [
{
name: "entity 3"
}
],
offerings: [
{
name: "offering 3"
}
]
},
{
name: "Area-3",
link: "dashboards.dashboard_1",
entities: [
{
name: "entity 4"
},
{
name: "entity 5"
},
{
name: "entity 6"
}
],
offerings: [
{
name: "offering 4"
},
{
name: "offering 5"
}
]
}
];
This treeView directive provides the "createSubTree" function, which I'm using as follows:
function createSubTree(ary) {
var res = [];
if (ary) {
res = ary.map(function(v, k) {
var id = k + 1;
return {
i: id,
id: 'id' + id,
label: v.name,
children: createSubTree(v.entities)
}
});
}
return res;
}
$scope.treedata = createSubTree($scope.subjectAreas);
The output looks like this:
Area-1
entity-1
entity-2
Area-2
entity-3
Area-3
entity-4
entity-5
entity-6
As my data structure contains two nested arrays for each SubjectArea (entities, and offerings), I need to have a sub-folder for entities, and a sub-folder for offerings as children of each SubjectArea, so the output should look like this:
Area-1
entities
entity-1
entity-2
offerings
offering-1
offering-2
Area-2
entities
entity-3
offerings
offering-3
Area-3
entities
entity-4
entity-5
entity-6
offerings
offering-4
offering-5
How can I modify the current code to have the recursive function create sub-groups for both entities and offerings?
Change your data to this:
$scope.subjectAreas = [{
name: "Area-1",
link: "dashboards.dashboard_1",
entities: [{
name: 'entities',
entities: [{
name: "entity 1"
}, {
name: "entity 2"
}]
}, {
name: 'offerings',
entities: [{
name: "offering 1"
}, {
name: "offering 2"
}]
}]
}, {
name: "Area-2",
link: "dashboards.dashboard_1",
entities: [{
name: "entity 3"
}],
offerings: [{
name: "offering 3"
}]
}, {
name: "Area-3",
link: "dashboards.dashboard_1",
entities: [{
name: "entity 4"
}, {
name: "entity 5"
}, {
name: "entity 6"
}],
offerings: [{
name: "offering 4"
}, {
name: "offering 5"
}]
}];
I've only done the first part, but you can complete the rest.