Exploring a JavaScript object's array

Question

Exploring a JavaScript object's array

Greetings, I am looking to develop a simple visual editor for my plugins.

 let x = {
        tag : "a",
        atts : {
            href : "/",
            class : "a",
            text:"link"
        },
        components:[
            {
                tag : "b",
                atts : {
                    class : "a",
                    text:"asdsad"
                },
                components:[
                    //...
                ]
            }
        ]
    }

I have a JavaScript object structured like this. My goal is to extract all the "components" properties from it.

function render_blocks(blocks){
        for (let i = 0; i < blocks.length; i++) {
            const block = blocks[i];
            let $block_html = $("<"+ block.tag +">",{...block.atts});
            if(block.components){
                for (let k = 0; k < block.components.length; k++) {
                    const block_comp = block.components[k];
                    let $block_html_comp = $("<"+ block_comp.tag +">",{...block_comp.atts});
                    $block_html.html($block_html.html()+$block_html_comp[0].outerHTML);
                }
            }
            html = $block_html[0].outerHTML;
            console.log(html);
        }
    }

I am currently using the function above to convert JavaScript blocks into HTML, though I admit it's not the best :P.

Please help me with this...

-Edit: Is there a way to efficiently scan nested components within my object? There could be a large number of them and I'm trying to find an optimal solution.

javascript arrays json

Answer 1

Answer №1

One way to tackle this problem is by utilizing recursion

let data = {
    tag: "a",
    atts: {
      href: "/",
      class: "a",
      text: "link"
    },
    components: [
        {
            tag: "b",
            atts: {
                class: "a",
                text: "asdsad"
            },
            components: [{ last: "last" }]
        }
    ]
};

let componentsArray = [];

function retrieveComponents(obj) {
    if (!obj.components) {
        return;
    }
    componentsArray.push(obj.components);
    obj.components.forEach(component => retrieveComponents(component));
}

retrieveComponents(data);
console.log("componentsArray ", componentsArray);

Answer 2

One way to tackle this problem is by utilizing recursion

let data = {
    tag: "a",
    atts: {
      href: "/",
      class: "a",
      text: "link"
    },
    components: [
        {
            tag: "b",
            atts: {
                class: "a",
                text: "asdsad"
            },
            components: [{ last: "last" }]
        }
    ]
};

let componentsArray = [];

function retrieveComponents(obj) {
    if (!obj.components) {
        return;
    }
    componentsArray.push(obj.components);
    obj.components.forEach(component => retrieveComponents(component));
}

retrieveComponents(data);
console.log("componentsArray ", componentsArray);

Answer 3

Answer №2

I was able to resolve the issue on my own. Solution

// Example code blocks
let x = {
  tag: "a",
  atts: {
    href: "/",
    class: "a"
  },
  components: [{
    tag: "b",
    atts: {
      class: "a",
      text: "asdsad"
    },
    components: [{
      tag: "b",
      atts: {
        class: "a",
        text: "asdsad"
      },
      components: [
        //...
      ]
    }]
  }]
}

function Block(block) {
  this.components = [];
  if (block.components) {
    this.components = block.components;
  }
  this.block = block;
}

Block.prototype.get_components = function() {
  return (this.components ? (this.components.length <= 0 ? false : this.components) : false);
}

Block.prototype.find_inner_components = function() {
  let has_components = this.get_components();
  let parent_components_arr = [];
  let section_components_arr = [];
  while (has_components) {
    let cur_components = has_components;
    has_components = false;
    for (let i = 0; i < cur_components.length; i++) {
      let new_block = new Block(cur_components[i]);
      section_components_arr.push(new_block);
      has_components = has_components || new_block.get_components();
    }
    parent_components_arr.push(section_components_arr);
    section_components_arr = [];
  }
  return parent_components_arr;

}

let a = new Block(x);
console.log(a.find_inner_components())

Answer 4

I was able to resolve the issue on my own. Solution

// Example code blocks
let x = {
  tag: "a",
  atts: {
    href: "/",
    class: "a"
  },
  components: [{
    tag: "b",
    atts: {
      class: "a",
      text: "asdsad"
    },
    components: [{
      tag: "b",
      atts: {
        class: "a",
        text: "asdsad"
      },
      components: [
        //...
      ]
    }]
  }]
}

function Block(block) {
  this.components = [];
  if (block.components) {
    this.components = block.components;
  }
  this.block = block;
}

Block.prototype.get_components = function() {
  return (this.components ? (this.components.length <= 0 ? false : this.components) : false);
}

Block.prototype.find_inner_components = function() {
  let has_components = this.get_components();
  let parent_components_arr = [];
  let section_components_arr = [];
  while (has_components) {
    let cur_components = has_components;
    has_components = false;
    for (let i = 0; i < cur_components.length; i++) {
      let new_block = new Block(cur_components[i]);
      section_components_arr.push(new_block);
      has_components = has_components || new_block.get_components();
    }
    parent_components_arr.push(section_components_arr);
    section_components_arr = [];
  }
  return parent_components_arr;

}

let a = new Block(x);
console.log(a.find_inner_components())

Exploring a JavaScript object's array

Answer №1

Answer №2

Similar questions

Having difficulty integrating framer-motion with react-router

react-select is not displaying assets correctly within the react-modal component

Sharing a new update in the IBM Connections Community

What is the best way to set conditions for document side script?

What is the best way to extract a certain property from a JSON string using JavaScript?

When used simultaneously, two jQuery functions fail to operate as expected

Using the useNavigation Hooks in React Js, learn the process of sending JSON data efficiently

Tips for live streaming a video file

What is the best way to maintain user authentication using Firebase?

Trouble accessing data with AJAX

Error: excessive recursion detected in <div ng-view="" class="ng-scope">

Providing access to information even in the absence of JavaScript functionality

Guide on retrieving POST data in sveltekit

Loop through an object in JQ only if it is present

Choosing a nested object within a JavaScript object

Acquire JSON data structures using Node.js

Issue with Mjpg paparazzo.js functionality not functioning as expected

How to access the directive object within the controller in AngularJS

What is the best way to loop through every element contained within a List of Long values in Java?

Is there a way to transform a SQL BIT into JSON using jQuery and then showcase it in an HTML format?