Creating Vue components based on a deeply nested data structure

Question

Creating Vue components based on a deeply nested data structure

Is there a way to efficiently utilize a nested object for generating Vue components?

My nested object structure is as follows:

"api": {
  "v1": {
    "groups": {
       "create": true,
       "get": true,
       "item": {
          "get": true,
          "destroy": false
      }
    }
  }
}

I aim to create a form with checkboxes for each value within the object. However, I am facing challenges in binding these values to Vue checkbox v-models.

One approach I attempted involved creating a list of lookup keys like ["api.v1.groups.create", "api.v1.groups.get"], and using a function like the one below to extract the entries:

getPerm (p) {
  return p.split('.').reduce(
    (xs, x) => (xs && xs[x]) ? xs[x] : null,
    this.role.permissions)
}

Unfortunately, this method does not yield the desired reference and only provides the boolean value.

javascript vue.js dictionary

Answer 1

Answer №1

Take a look at my helpful code sandbox where I demonstrate how to flatten a dictionary and create a list from a nested entry: Code sandbox link

(The code was forked from a basic Vue template, so you may still see references to 'chart')

Once you flatten your dictionary, you can easily generate vue components using v-for as usual!

Below is the code I used to flatten the dictionary, which you can also check out on the site:

// Creating a nested object
var nested = {
  "api": {
    "v1": {
      "groups": {
        "create": true,
        "get": true,
        "item": {
          "get": true,
          "destroy": false
        }
      }
    }
  }
}

// Function to determine if we have reached the bottom of the object
const isObj = o => o?.constructor === Object;

// I had to use a class to handle the output in different recursive scopes
class NestedProcessor {
  // Constructor initiates the function and returns the flattened dictionary
  constructor(leveled_dict) {
    this.output = {}
    this.process_dict_recursive(leveled_dict)
    return this.ouput
  }
  process_dict_recursive(leveled_dict, keyList = [], depth = 0) {
    if (isObj(leveled_dict)) { // check if we have hit the bottom
      keyList.push('')
      depth++ 
      for (let key in leveled_dict) { 
        keyList[depth - 1] = key
        this.process_dict_recursive(leveled_dict[key], keyList, depth) // call the function recursively at our new depth
      }
    }
    else {
      // Create our lookup keys
      let path = ''
      keyList.forEach((v) => {
        path += v
        path += '.'
      })
      path = path.slice(0, -1) // Remove the last '.'
      this.output[path] = leveled_dict
    }
  }
}

console.log(new NestedProcessor(nested))
//{
//  "output": {
//    "api.v1.groups.create": true,
//    "api.v1.groups.get": true,
//    "api.v1.groups.item.get": true,
//    "api.v1.groups.item.destroy": false
//  }
//}

Additional Notes:

I opted for using a class to handle variable scope within the recursion
To determine the end point, I utilized a function from Stack Overflow

Answer 2

Take a look at my helpful code sandbox where I demonstrate how to flatten a dictionary and create a list from a nested entry: Code sandbox link

(The code was forked from a basic Vue template, so you may still see references to 'chart')

Once you flatten your dictionary, you can easily generate vue components using v-for as usual!

Below is the code I used to flatten the dictionary, which you can also check out on the site:

// Creating a nested object
var nested = {
  "api": {
    "v1": {
      "groups": {
        "create": true,
        "get": true,
        "item": {
          "get": true,
          "destroy": false
        }
      }
    }
  }
}

// Function to determine if we have reached the bottom of the object
const isObj = o => o?.constructor === Object;

// I had to use a class to handle the output in different recursive scopes
class NestedProcessor {
  // Constructor initiates the function and returns the flattened dictionary
  constructor(leveled_dict) {
    this.output = {}
    this.process_dict_recursive(leveled_dict)
    return this.ouput
  }
  process_dict_recursive(leveled_dict, keyList = [], depth = 0) {
    if (isObj(leveled_dict)) { // check if we have hit the bottom
      keyList.push('')
      depth++ 
      for (let key in leveled_dict) { 
        keyList[depth - 1] = key
        this.process_dict_recursive(leveled_dict[key], keyList, depth) // call the function recursively at our new depth
      }
    }
    else {
      // Create our lookup keys
      let path = ''
      keyList.forEach((v) => {
        path += v
        path += '.'
      })
      path = path.slice(0, -1) // Remove the last '.'
      this.output[path] = leveled_dict
    }
  }
}

console.log(new NestedProcessor(nested))
//{
//  "output": {
//    "api.v1.groups.create": true,
//    "api.v1.groups.get": true,
//    "api.v1.groups.item.get": true,
//    "api.v1.groups.item.destroy": false
//  }
//}

Additional Notes:

I opted for using a class to handle variable scope within the recursion
To determine the end point, I utilized a function from Stack Overflow

Creating Vue components based on a deeply nested data structure

Answer №1

Similar questions

Tips for concealing passwords and email addresses in URLs within an Express application

Storing user input as an object key in typescript: A comprehensive guide

Constantly encountering the issue of receiving an error message stating "Trailing Spaces not Permitted" while working with VueJS

Error: Webpack is unable to load PDF file: Module parsing unsuccessful. A suitable loader is required to manage this file format

Sending an HTTP POST request from an Angular 2 client to a Node.js server

Real-time Data Stream and Navigation Bar Location

Problematic Situation Arising from JavaScript AJAX and NVD3.JS Unresolved Object Error

The attempt to cast to a number for the value of "[object Object]" at the specified path failed in mongoose

Issue with Material-ui Autocomplete: onChange event not firing when value is updated in onHighlightChange

Why is JSON ParseError still returned by jQuery .ajax call despite JSON being seemingly correct?

Connecting Ag Grid with modules

What is the significance of having multiple route parameters in Express?

Exploring characteristics using DocumentTraversal

Renaming and destructuring of an array's length using ReactJS

When a new entry is added to the database, automatically refresh a <div> section within an HTML document

Displaying a div when hovering over it, and keeping it visible until clicked

Is there a way to reload the entire page when clicking on a link in NuxtJS?

The technique for handling intricate calls in node.js

What is the process for setting up Vue.js and using it in conjunction with Sails JS?

Guide on sending images as props in a Vue.js component (using Vite instead of require due to compatibility issues)