Exploring Vuetify's TreeView for Dynamic Data Management

I am looking for a way to utilize the v-treeview component from Vuetify in order to construct a hierarchical list of items. This list could potentially have multiple layers, ranging from 10 to 100 levels deep, each containing around 100 items. How can I transform hundreds of individual objects into one comprehensive object with nested children?

Initial Data (2 or more objects):

[
  {
    id:1 ,
    name: "hot-dog",
    children: [
      {name:"meat"}
    ]
  },
  {
    id:2 ,
    name: "meat",
    children: [
      {name:"salt"},
      {name:"horse-meat"}
    ]
  }
]

Target Data Structure (single master object):

[
  {
    id:1 ,
    name: "hot-dog",
    children: [
      {
        id:2 ,
        name: "meat",
        children: [
          {name:"salt"},
          {name:"horse-meat"}
        ]
      }
    ]
  }
]

Answer №1

It appears that there is a need to organize these elements into a tree structure for display.

Currently, each item is listed as objects in a flat array, similar to the example below:

[
  { 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" },
];

This data needs to be restructured into an array of main objects.

An illustrative MRE has been created to demonstrate this functionality. Additionally, you can view a fully functional example on codepen here.

<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, []);
    }
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to load Javascript using AJAX with jQuery?

So I have this JavaScript code that I insert into a webpage using the following: <script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395"></script> It basically places an object/embed code into the w ...

I'm looking to create a unit test for my AngularJS application

I am currently working on a weather application that utilizes the to retrieve weather data. The JavaScript code I have written for this app is shown below: angular.module('ourAppApp') .controller('MainCtrl', function($scope,apiFac) { ...

What is the best way to merge 60 related jquery functions into a unified function?

I designed a webpage that serves as an extensive checklist. When you click on the edit button for a checklist item, a modal window opens up. This modal window contains a radio button to indicate whether any issues were found during the check. If "Yes" is s ...

Issue in Angular: Attempting to access properties of undefined (specifically 'CustomHeaderComponent')

I have encountered a persistent error message while working on a new component for my project. Despite double-checking the injection code and ensuring that the module and component export logic are correct, I am unable to pinpoint the issue. custom-header ...

The sequencing of operations in Node.js streams

I am having an issue with validating an image before saving it to disk. Currently, I am utilizing the GM library. // Express application implementation app.post('/image', function(req, res) { var stream = gm(req) .size({ bufferStr ...

What is a sophisticated approach to overriding a jQuery method specifically within a plugin?

Today, my brain is in a bit of a fog where I can't seem to find an elegant solution to this issue. I've recently come into possession of a plugin that I need to tweak in order to pass an enabled or disabled state to it, allowing it to detach all ...

After the vuetify update, $material.text does not contain the .primary property in the vuetify/src/stylus/components/_app.styl file

Since updating Vuetify and Vue, I've been encountering this error message: Module build failed: Error: C:\Users...\node_modules\vuetify\src\stylus\components_app.styl:25:25 21| position: relative 22| 23| app ...

shared interfaces in a complete javascript application

In the past, I have typically used different languages for front-end and back-end development. But now, I want to explore the benefits of using JavaScript/TypeScript on both sides so that I can have key data models defined in one central location for both ...

Tips for preventing a page from automatically scrolling to the top after submitting a form

Recently, I set up a form where users can input values. The form is set to submit either on change or when the user hits enter, depending on which value they want to update. However, after the values are submitted, the page automatically jumps back to the ...

Programmatically installing Npm is ineffective

I am currently attempting to interact with the npm api programmatically, as illustrated in the code snippet below: var npm = require("npm"); npm.load(npm.config, function (err) { npm.commands.install(["express"], function(err, done) { console ...

Using the onclick event with an image created through PHP code

I am currently in the process of developing a dynamic image represented as a graph displaying the number of documents generated each day. This interactive image is being created using PHP, and I aim to improve user engagement by enabling them to click on t ...

Running function without the need to click on 'li' element

In the process of developing a simple guessing game, my aim is to allow users to click on a number and have that number stored as userAnswer, while the computerAnswer is a randomly generated number between one and ten. Despite setting the setVariables() f ...

Having trouble with blurriness in the SVG image loading on three.js

Currently, I am using loadTexture (THREE.ImageUtils.loadTexture('/images/areaYellow.svg')) to load SVG images. However, when I zoom in on the image, it becomes blurred. Is there a way to load the image without this blurriness? I am currently work ...

Generate a download link for the image being shown in a div element

I am working on a project where I need to display HTML content offline within a Windows Application. The application, developed in Autoplay Media Studio, includes an iexplore box to load the HTML. Before the application loads, I have set up a silent insta ...

Generating random numbers within specified character limits using Javascript and Selenium

Just starting to learn javascript - I am working on creating random user IDs for my selenium test scenarios. The line of code I am using for the value is as follows: javascript{Math.floor(Math.random()*11111)} However, there is a specific field that need ...

Dropdown selection returning the text value instead of the designated value

Is it possible to retrieve the text "Region 1" instead of just the value '1' from a dropdown menu in PHP? <select name = 'region' id = 'region'> <option value = '1'>Region 1</option> <select&g ...

Cutting imagery to create a new design element

https://i.sstatic.net/IAh0h.jpg There is an image above with 6 gears (circles with pointy edges). My goal is to separate them into individual pictures and, on each picture's hover, have a relevant line with text appear. How can I achieve this? The a ...

Numpad functionality in JQuery malfunctioning post-ajax request

Using the jQuery numpad plugin has been flawless until after an AJAX call. I have tried various functions like on('click') and others, but unfortunately, none of them worked as expected. Apologies for my poor English! You can find the extension l ...

Send the form to the webpage and display various div elements based on the entered information

I have created a form that is designed to display one of four hidden divs on a page, depending on the input provided. Here is the form: <form> <input id="place" name="place" type="text"> <input name="datepicker" type="text" id="datepicker" ...

Incorporate text into the URL of the image

Got a URL of an image like this: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg', and looking to add 240x240 within the URL. Current Url: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg Desire ...