Display the keys of a nested array in Vue.js when the structure is unknown

Question

Display the keys of a nested array in Vue.js when the structure is unknown

Here is a representation of a dynamic array I have:

 nodes: [
        {
          n1: "Foods",
        },
        {
          n4: "Drinks",
          b7: [
            {
              a2: "Beers",
              a4: [
                {
                  a5: "Budweiser",
                  a6: "example",
                },
                {
                  a7: "Heineken",
                },
                {
                        a8: "1",
                        a9: "2",
                        
                    },
                    
              ],
            },
            {
              z1: "Wines",
            },
            {
              z2: "Whiskey",
            },
          ],
        },
      ]

This array is constantly changing. In order to visualize the key relationships in this array, I want to display them in a tree table. Here's an example of how it should look:

javascript vue.js

Answer 1

Answer №1

I have implemented this solution using pure vanilla JavaScript:

(async () => {
  var nodes = [{"n1":"Foods"},{"n4":"Drinks","b7":[{"a2":"Beers","a4":[{"a5":"Budweiser","a6":"deneme"},{"a7":"Heineken"},{"a8":"1","a9":"2"}]},{"z1":"Wines"},{"z2":"Whiskey"}]}];

  var tree = "";

  // Mapping each Node from the nodes
  async function mapNodes(nodes) {
    nodes.map(async (node) => {
      await mapNode(node);
    });
  }

  // Mapping each key from the Node
  async function mapNode(node) {
    tree += `<ul>`;
    Object.keys(node).map((key) => {
      mapKeys(node[key], key);
    });
    tree += `</ul>`;
  }

  // Handling each key value
  async function mapKeys(elm) {
    if (typeof elm === "string") {
      tree += `<li>${elm}</li>`;
    } else if (typeof elm === "object") {
      await mapNode(elm);
    } else if (Array.isArray(elm)) {
      await mapNodes(elm);
    }
  }

  // Start of the loop
  await mapNodes(nodes);
  // The rendered tree can be viewed by injecting ${tree} variable to the DOM
  document.querySelector("div").innerHTML = tree;
})();

<div></div>

Answer 2

I have implemented this solution using pure vanilla JavaScript:

(async () => {
  var nodes = [{"n1":"Foods"},{"n4":"Drinks","b7":[{"a2":"Beers","a4":[{"a5":"Budweiser","a6":"deneme"},{"a7":"Heineken"},{"a8":"1","a9":"2"}]},{"z1":"Wines"},{"z2":"Whiskey"}]}];

  var tree = "";

  // Mapping each Node from the nodes
  async function mapNodes(nodes) {
    nodes.map(async (node) => {
      await mapNode(node);
    });
  }

  // Mapping each key from the Node
  async function mapNode(node) {
    tree += `<ul>`;
    Object.keys(node).map((key) => {
      mapKeys(node[key], key);
    });
    tree += `</ul>`;
  }

  // Handling each key value
  async function mapKeys(elm) {
    if (typeof elm === "string") {
      tree += `<li>${elm}</li>`;
    } else if (typeof elm === "object") {
      await mapNode(elm);
    } else if (Array.isArray(elm)) {
      await mapNodes(elm);
    }
  }

  // Start of the loop
  await mapNodes(nodes);
  // The rendered tree can be viewed by injecting ${tree} variable to the DOM
  document.querySelector("div").innerHTML = tree;
})();

<div></div>

Display the keys of a nested array in Vue.js when the structure is unknown

Answer №1

Similar questions

Can someone please help me figure out why the "setInterval" function in my script isn't functioning as expected?

Utilizing a single variable across different JavaScript scripts - where one script includes a .ready function while the other does not

Is it possible to utilize Dictionaries (key, value) collections with JQuery?

modify the color of text in a row within a jquery ajax table

Scroll-triggered Autoplay for YouTube Videos using JQuery

Is it possible for the Observable call in Angular 4 to function similarly to jQuery's synchronous AJAX method?

Ways to tidy HTML/XML code?

Modules failing to load in the System JS framework

Leveraging an external JSON file within a Vue application

Displaying a list of objects in Vue.js using an <a> tag to iterate

store events in a MySQL database using a servlet callback and display them on a full calendar

How can you effectively load shared header and panel HTML onto pages located in separate directories using jQuery Mobile?

Node.js Express.js Module for Asynchronous SqLite Operations

Improve Email Regular Expression to Restrict Consecutive Periods

What is the best method for incorporating information into an existing object when it is currently empty?

Utilizing Browserify routes and configuring Webstorm

VueJS - Harnessing the power of the Document Object Model for dynamic template rendering

Tips for transforming the input date value from Mui Datepicker

What's the reason behind beforeunload not triggering?

After swapping out "div" with "input" and then replacing "input" with