I'm trying to build a TreeView from scratch in Vue. This is my code so far.
The first problem I'm encountering is that the content of the subfolders (like child folder 1) is not being displayed. The second problem is that minimizing the subfolders minimizes the whole treeview.
Could anyone help me understand why these two errors in functionality are occurring and how to fix them?
your code only dealed with the first level of your folders, you should recursively revoke your tree components to deal with child folders. please refer to below article.
https://itnext.io/recursion-for-nested-tree-structure-components-in-vue-1cb600005475
your code is using one param (isOpen) to toggle minimizing all folders, so if isOpen is false, all folders minimized; you should use item.isOpen to deal with different item;
treeData: {
name: "My Tree",
isOpen: true,
children: [
{ name: "hello" },
{ name: "wat" },
{
name: "child folder",
isOpen: false,
children: [
{
name: "child folder 1",
isOpen: false,
children: [{ name: "hello" }, { name: "wat" }]
},
{ name: "hello" },
{ name: "wat" },
{
name: "child folder 2",
isOpen: false,
children: [{ name: "hello" }, { name: "wat" }]
}
]
}
]
}
};
Related
in my react app, there is a setting "page" with different setting categories with respective setting items.
Hence, I need a nested state (?) to avoid having lots of properties called "category1-id", "category1-element1-id" etc.
That looks as follows:
this.state = {
categories: [
{
id: 1,
label: "Category 1",
elements: [
{ id: 1, label: "Option 1", selected: true },
{ id: 2, label: "Option 2", selected: false },
],
},
{
id: 2,
label: "Category 2",
elements: [
{ id: 1, label: "Option 1", selected: true },
{ id: 2, label: "Option 2", selected: false },
{ id: 3, label: "Option 3", selected: false },
],
},
Other property: "...",
To update the state, I need a deep copy instead of a shallow one. How do I achieve this? Is there any other alternative solution?
Using
let categories = [...this.state.categories];
categories = JSON.parse(JSON.stringify(categories));
doesn't work (error) and is not really fail-proof.
Since this is the only nested state in my app, I'd like to avoid using lodash & co.
The function called when clicking on the option looks like this. But this modifies the state directly.
handleOptionSelect = (categoryId, option) => {
const categories = [...this.state.categories];
// FIND INDEX OF CATEGORY
const category = categories.find((category) => category.id === categoryId);
const indexCat = categories.indexOf(category);
// //FIND INDEX OF ELEMENT
const elements = [...category.elements];
const indexEle = elements.indexOf(element);
//MODIFY COPIED STATE
const e = categories[indexCat].elements[indexEle];
e.selected = e.selected ? false : true;
// //SET NEW STATE
this.setState({ categories });
}
Thank you very much for your help! I am still at the beginning trying to learn React and JS :)
What about if you use an object to store your categories? I mean, use a hash of key values in which each key is the id of the category.
this.state = {
categories: {
1: {
label: "Category 1",
elements: [
{ id: 1, label: "Option 1", selected: true },
{ id: 2, label: "Option 2", selected: false },
],
},
2: {...}
}
}
This should help you add or update any category, for example:
// Update category of id 4
this.setState({...categories, 4: updatedCategory })
Same principle should apply to the elements of the category if you use an object to store them.
Just wanted to get some opinion about a dilemma I'm facing. I'm using MongoDB and Node for the backend and React/Redux for frontend. I'm using redux-thunk to do api calls and one of my data models has sort of a parent-child relationship. To simplify it:
Parent.js
name: {
type: String
default: ""
},
children: [{
type: mongoose.Schema.Types.ObjectID,
ref: "Child"
}]
}
Child.js
name: {
type: String
default: ""
},
parent: {
type: mongoose.Schema.Types.ObjectID,
ref: "Parent"
}
}
Now, I'm using redux-thunk to fetch the Parents and store them in a redux state. So my initial redux state looks something like this:
parents: [
{
name: "Parent 1",
children: [{
name: "Child 1",
parent: "Parent 1",
},
{
name: "Child 2",
parent: "Parent 1",
}
]
},
{
name: "Parent 2",
children: [{
name: "Child 3",
parent: "Parent 2",
},
{
name: "Child 4",
parent: "Parent 2",
}
]
}
]
And now for example, I have a form in the front end that adds a child and chooses a parent from a dropdown, I can't seem to figure out how to manipulate that parent's list of children. I'm sure adding a child would just be the start of my problems, I'd also have to think about changing name of a child and deleting.
I do have a working backend for this already written in Node and Mongoose where the child gets appended to the list of children of the parent; however, I'm stuck with the redux/react state side of it.
Any suggestions?
I am currently having problems using my data in react-d3-tree. The data coming from the server is not compatible with the format that react-d3-tree accepts.
I was told that doing the process using a foreach function for every item will work, but I think that will be really slow, especially whe the data is too big.
The data (as shown in my console) right now is like this:
0: {
series: 'Fate'
type: 'Servant'
class: 'Saber',
},
1: {
series: 'Fate',
type: 'Servant'
class: 'Archer',
},
2: {
series: 'Fate',
type: 'Demi-servant'
class: 'Shielder',
}
And I want to achieve this structure:
[
{
name: 'Fate',
children: [
{
name: 'Servant',
children: [
{
name: 'Saber',
children: []
},
{
name: 'Archer',
children: []
}
]
},
{
name: 'Demi-servant',
children: [
{
name: 'Shielder',
children: []
}
]
}
]
}
]
This is only sample data, and later on, and I might be converting data with more children. Is there any npm package that can be helpful?
Nevermind, I actually found my answer.
I'll share these useful links in case anyone finds this question too.
https://www.npmjs.com/package/shape-json
https://www.npmjs.com/package/shape-array
I am using some assignment destructuring in my MongoDB/Node backend in order to handle some post-processing. I'm just trying to understand how this destructuring works, and if, in the case of an array of multiple elements and nested arrays, if I can input the element I want to target.
Take for instance this code:
services: [
,
{
history: [...preSaveData]
}
]
} = preSaveDocObj;
My assumption is that the "," in "services" for the above code will default to looking at the first element in the array. Correct?
Now, if I have a document structure that looks like this (see below), and I know I want to target the "services" element where "service" is equal to "typeTwo", how would I do that?:
{
_id: 4d39fe8b23dac43194a7f571,
name: {
first: "Jane",
last: "Smith"
}
services: [
{
service: "typeOne",
history: [
{ _id: 121,
completed: true,
title: "rookie"
},
{ _id: 122,
completed: false,
title: "novice"
}
]
},
{
service: "typeTwo",
history: [
{ _id: 135,
completed: true,
title: "rookie"
},
{ _id: 136,
completed: false,
title: "novice"
}
]
}
]
}
How can I edit this code (see below) to specifically target the "services" array where "service" is equal to "typeTwo"?
services: [
,
{
history: [...preSaveData]
}
]
} = preSaveDocObj;
Don't overdestructure, just find:
const { history: [...preSavedData] } = doc.services.find(it => it.serice === "typeTwo");
I have a NET back-end interacting with Amazon S3 web services. I am using a Javascript library (ExtJs) on the front end to try and create a file-browser. In order to do that I have to convert all the file paths in Amazon like
Directory1/SubDirectory1/File.txt
Directory1/SubDirectory2/File2.txt
Directory2/SubDirectory3/File3.txt
To a JSON tree which would something like this:
root: {
expanded: true,
children: [
{ text: "Directory1", expanded: true, children: [
{ text: "SubDirectory1", children: [
{text:"File.txt", leaf: true }
]
},
{ text: "SubDirectory2",children: [
{text: "File2.txt"",leaf: true}
]
}
] },
{ text: "Director2", expanded: true, children:[
{text:"SubDirectory3",children: [
{text:"File3.txt",leaf: true}
]
}
]
}
}
Anyone know a good way to do this in .NET? Anyway I can think of seems very error prone or heavy on really inefficient.