I have following data structure:
var data = {
labels: { name: "Name" },
data: {
name: "Layer 1",
children: [
{
name: "Layer 1-1",
children: [
{ name: "Layer 1-1-1" },
{ name: "Layer 1-1-2" }
]
},
{
name: "Layer 1-2",
children: [
{ name: "Layer 1-2-1" },
{ name: "Layer 1-2-2" }
]
},
{ name: "Layer 1-3" }
]
}
};
As you can see each layer can have it's own children. In this fiddle you can see, that the children are rendered multiple times: https://jsfiddle.net/kaljak/9xuLpnxp/
What do I have to change that the children are only rendered once?
You have one to many {{#children}} tags, you should change the upper one to {{#data}}
See this fiddle: https://jsfiddle.net/9xuLpnxp/1/
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');
I am trying to use v-treeview to create a nested list of items. This list of items could be 10 layers deep or 100, each with 100 items within. How would I go about turning a few hundred objects into one large object with children nested within children?
Starting Data (2 or more objects):
[
{
id:1 ,
name: "hot-dog",
children: [
{name:"meat"}
]
},
{
id:2 ,
name: "meat",
children: [
{name:"salt"}
{name:"horse-meat"}
]
}
]
Desired Data (one master object):
[
{
id:1 ,
name: "hot-dog",
children: [
{
id:2 ,
name: "meat",
children: [
{name:"salt"}
{name:"horse-meat"}
]
}
]
}
]
It seems that you want to rearrange those items to be displayed as a tree view.
As you've posted, each of then are displayed as objects in a flat array, like the following:
[
{ id: 1, name: "hot-dog",
children: [ { name: "meat" } ] },
{ id: 2, name: "meat",
children: [ { name: "salt" }, { name: "horse-meat" } ] },
{ id: 3, name: "salt" },
{ id: 4, name: "horse-meat" },
];
And need to be transformed into a array of master objects.
I've written a MRE that can display it working. Also, see this working example on codepen.
<div id="app">
<v-app id="inspire">
<v-treeview :items="formattedItems"></v-treeview>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{
id: 1,
name: "hot-dog",
children: [
{name:"meat"},
],
},
{
id: 2,
name: "meat",
children: [
{name:"salt"},
{name:"horse-meat"},
],
},
{
id: 3,
name: "pancake",
children: [
{name: "honey"},
]
},
{
id: 4,
name: "honey",
},
{
id: 5,
name: "salt",
},
{
id: 6,
name: "horse-meat",
},
]
}),
computed: {
formattedItems() {
const mapper = function (current) {
let child = this.find(item => item.name === current.name);
if (child.children) {
child.children = child.children.map(mapper, this);
}
return child;
};
const reducer = (accum, current, index, array) => {
if (!array.find(item => !!item.children && item.children.find(child => child.name === current.name))) {
current.children = current.children.map(mapper, array);
accum.push(current);
}
return accum;
};
return this.items.reduce(reducer, []);
}
}
})
In D3.js layout , the tooltip is visible only for the nodes which has children .
Find my code attached
https://codesandbox.io/s/affectionate-thunder-l024x
I have an object some of them contains children , some are not . While displaying them in the chart , the tooltip only visible to the object which has children in it .
const dataObj = {
name: "Home",
children: [
{
name: "A",
metricsValue: "ma",
children: [
{
name: "A-B",
value: 1.2,
metricsValue: "ma-mb"
},
{
name: "A-B-C",
metricsValue: "ma-mb-mc",
children: [
{
name: "A-B-C-D-1",
value: 2.5,
metricsValue: "ma-mb-mc-md-1"
},
{
name: "A-B-C-D-2",
value: 2.566,
metricsValue: "ma-mb-mc-md-2"
}
]
}
]
},
{
name: "BCD",
value: "6.5",
metricsValue: "m1"
}
]
};
I'm a beginner meteor. I create a blog with many posts(article) by each categories. This is my Collection:
if (Category.find().count() === 0) {
[
{
name: 'IT',
sub_categories: [
{ name: 'Java' },
{ name: 'PHP' },
{ name: '.NET' },
{ name: 'Android/iOS' },
{ name: 'HTML/CSS' },
{ name: 'Javascript and Framworks' },
{ name: 'Ruby on Rails' },
],
},
{
name: 'ENGLISH',
sub_categories: [
{ name: 'Listening' },
{ name: 'Speaking' },
{ name: 'Writing' },
{ name: 'Reading' },
{ name: 'Topic' },
],
},
{
name: 'SoftSkill',
sub_categories: [
{ name: 'CV and CL' },
{ name: 'Presentation' },
{ name: 'Teamwork' },
],
},
{
name: 'ENTERTAINMENT',
sub_categories: [
{ name: 'Sports' },
{ name: 'Games' },
{ name: 'Music & Videos' },
{ name: 'Fashion' },
{ name: 'Talk show' },
],
},
].forEach(doc => {
Category.insert(doc);
});
}
After I save all posts by each categories, Now I want to show it throught select option
Details:
When I click on "IT" button -> app show all sub_categories. Then I choose one option (example "Java") it will show all posts have sub_categories = "Java". Can you help me to do it?
You can use navbar for your requirement.
In that navbar you can have dropdown as navbar element
Please Follow this steps if it is useful for you
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.