I have an array of objects like this:
const data = [{id: 3, name: ''}, {id: 4, name: ''}, {id: 5, name: '', parent: 3}, {id: 6, name: '', parent: 5}, {id: 7, name: '', parent: 4}, {id: 8, name: '', parent: 8}];
Is there a way to create a nested list by appending child elements to their corresponding parent element using <li>? For example:
<li>
object id:3 (parent)
<li>object id:5</li> (child)
</li>
Any suggestions would be greatly appreciated! :)
Creating nested tree structures and converting them into HTML can be done using two separate functions.
let data = [{id: 3, name: ''}, {id: 4, name: ''}, {id: 5, name: '', parent: 3}, {id: 6, name: '', parent: 5}, {id: 7, name: '', parent: 4}, {id: 8, name: '', parent: 8}];
const createTree = (data, parentId = undefined) => {
return data.reduce((result, element) => {
if (parentId == element.parent) {
const obj = { ...element }
const children = createTree(data, element.id);
if (children) obj.children = children
result.push(obj)
}
return result
}, [])
}
const createHtml = (data) => {
const ul = document.createElement('ul')
data.forEach(element => {
const li = document.createElement('li');
const text = document.createElement('span')
text.textContent = `object id: ${element.id}`;
li.appendChild(text)
const children = createHtml(element.children);
if (children) li.appendChild(children)
ul.appendChild(li)
})
return ul
}
const treeStructure = createTree(data)
const htmlStructure = createHtml(treeStructure)
document.body.appendChild(htmlStructure)As a beginner using a starter project from glitch, I have a project set up at this link: I need help understanding how to obtain the message_broadcast_id and how to create it. This is how I usually create a normal message: function callSendAPI(messageDa ...
I successfully integrated the Google Maps JavaScript API v3 to create a personalized store locator for our company's website. While the current code is functional for two stores, it lacks scalability due to the unconventional methods used. My impleme ...
I am working on a Deno project and need to utilize the ES2019 flatMap() method on an array. To do this, I have created a tsconfig.json file with the following configuration: { "compilerOptions": { "target": "es5", ...
Trying to utilize JavaScript and Jquery for database search, a generic query.php file has been set up to pass in the database and query, returning an array. Strangely, when attempting to select all using *, the PHP server crashes with: https://i.stack.img ...
Here is the code I have written: <!doctype html> <html lang="en"> <head> <title>Testing form input</title> <style type="text/css></style> <script type="text/javascript" src="validation.js"></script> &l ...
I am struggling to find any props to deactivate the clearable icon. Additionally, there doesn't seem to be an event related to this issue. Is there a method available to eliminate the clearable icon? <v-file-input ref="profilePictureFileInput" ...
When working with JavaScript, it is important to note that almost all expressions have a "truthiness" value. This means that if you use an expression in a statement that expects a boolean, it will be evaluated as a boolean equivalent. For example: let a = ...
I am facing an issue in my factory where I want to return a promise inside a function, but every time I try, my controller throws an error like: Provider 'personFactory' must return a value from $get factory method. This is how my factory looks ...
I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...
I am struggling to filter out positions from the positions array that are already present in the people array. Despite trying different combinations of _.forEach and _.filter, I can't seem to solve it. console.log(position) var test = _.filter(posi ...
When working with Jquery, I am creating two arrays - one embedded inside the other. Here is an example of what it looks like: arrayOne = [{name:'a',value:1}, {name:'b',value:2}] var arrayTwo = [{name:'foo',value:'blah&ap ...
When attempting to access an external URL, the website that should open in a new tab is redirecting to http://localhost:3001/www.google.com instead of www.google.com. <IconButton key={index} size="large" color="primary" href={e.url ...
I'm just starting to learn AngularJS, and I have a project where I need to create an interactive search feature. So far, this is what I have: article/views/articles.html <form class="form-inline"> <div class="form-group"> < ...
I have a stored userProfile in the Vuex state in order to access it throughout my project. However, when I try to use it in the created() hook, the profile is not loaded yet during the initial page load. Although the object exists, it does not contain any ...
After successfully reading files via PHP from a directory and dynamically creating a drop-down menu to view the file content, I have a query. Is there a way to display the text files' content on the same page without calling another PHP page? I know t ...
Currently, I am delving into the realm of node.js through an online course on Udemy. However, I've run into a perplexing issue that seems to defy logic and reason. The lesson revolves around accessing external files in node.js using module.exports. I ...
Just starting out with node.js and I encountered an issue: TypeError: Cannot read property 'then' of undefined This is the code snippet causing the problem: router.post("/signup", (req, res) => { const userRegister = new UserRegister({ ...
I'm currently exploring how to utilize the stop() function in order to halt the animation buildup within Galleriffic. This issue arises when swiftly and repeatedly mousing over the thumbnail images. While I understand that in a basic jQuery script, yo ...
Working on my Ionic 3 project, I have encountered an issue with the ion-item click listener. The scenario is that I am adding text over a canvas and then attempting to change the style of the text (such as font-family, font-size, bold, and italic). The UI ...
Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...