Traverse through an array or object using recursive render functions in JavaScript

Question

Traverse through an array or object using recursive render functions in JavaScript

Here is an example of the issue I am currently trying to solve: https://codepen.io/wombsplitter/pen/KyWKod

This is the structure of my array:

[{
 //obj 1
 link: [{
        //obj 2
        link: [{
              //obj 3
              }]
        }]
}]

The array has the ability to contain any number of elements at different levels. My goal is to recursively navigate through the array and, using a rendering function, display them on the page while maintaining their original structure.

div.item
  div.info
  div.link
     div.info
     div.link
        div.info
        div.link
           div.info
           div.link

I would greatly appreciate any help or advice on how to achieve this.

javascript arrays recursion vue.js vuejs2

Answer 1

Answer №1

How about considering this alternative approach:

generateContent(handler, array) {
  return establishPattern(this.example, handler)
}

// located outside of the App entity
function establishPattern(example, handler){
  return handler('section', { style: 'result'}, example.map(e => {
    return handler('div', {class: 'description'}, [e.label, establishPattern(e.elements, handler)]);
  }))
}

Please note that this method assumes there are no repeating elements in your dataset.

Answer 2

How about considering this alternative approach:

generateContent(handler, array) {
  return establishPattern(this.example, handler)
}

// located outside of the App entity
function establishPattern(example, handler){
  return handler('section', { style: 'result'}, example.map(e => {
    return handler('div', {class: 'description'}, [e.label, establishPattern(e.elements, handler)]);
  }))
}

Please note that this method assumes there are no repeating elements in your dataset.

Answer 3

Answer №2

There seems to be a mistake in your code below. You are calling `arr.map` instead of `this.test.map`.

    renderContent(element, arr) {
      return element('div', { class: 'link'}, arr.map(item => {
        return element('div', item.name);
    }

Answer 4

There seems to be a mistake in your code below. You are calling `arr.map` instead of `this.test.map`.

    renderContent(element, arr) {
      return element('div', { class: 'link'}, arr.map(item => {
        return element('div', item.name);
    }

Answer 5

Answer №3

If you simply desire the values, you can achieve it in the following way:

function obtainValues(collection){
  var result = [];
  function recursiveFunc(input){
    var item;
    if(input instanceof Array){
      for(var index=0,length=input.length; index<length; index++){
        item = input[index];
        if(typeof item === 'object' && item !== null){
          return recursiveFunc(item);
        }
        else{
          result.push(item);
        }
      }
    }
    else if(typeof input === 'object' && input !== null){
      for(var key in input){
        item = input[key];
        if(typeof item === 'object' && item !== null){
          return recursiveFunc(item);
        }
        else{
          result.push(item);
        }
      }
    }
    else{
      result.push(input);
    }
    return result;
  }
  return recursiveFunc(collection);
}
var dataObject = {
  el: '#app',
  data: {
    test: [{
      name: 'parent',
      link: [{
        name: 'child1',
        link: [{
          name: 'child2',
          deepObj: {
            deepProp:'Number 7 test',
            num:7,
            deeperArray:[true, false, 'test', 'in', 'here', 1]
          }
        }]
      }]
    },
    {
      name: 'parent2'
    }]
  }
}
var values = obtainValues(dataObject);
// obtainValues brings back an array, hence the .join()
console.log(values.join(', ')); console.log(values);

Answer 6

If you simply desire the values, you can achieve it in the following way:

function obtainValues(collection){
  var result = [];
  function recursiveFunc(input){
    var item;
    if(input instanceof Array){
      for(var index=0,length=input.length; index<length; index++){
        item = input[index];
        if(typeof item === 'object' && item !== null){
          return recursiveFunc(item);
        }
        else{
          result.push(item);
        }
      }
    }
    else if(typeof input === 'object' && input !== null){
      for(var key in input){
        item = input[key];
        if(typeof item === 'object' && item !== null){
          return recursiveFunc(item);
        }
        else{
          result.push(item);
        }
      }
    }
    else{
      result.push(input);
    }
    return result;
  }
  return recursiveFunc(collection);
}
var dataObject = {
  el: '#app',
  data: {
    test: [{
      name: 'parent',
      link: [{
        name: 'child1',
        link: [{
          name: 'child2',
          deepObj: {
            deepProp:'Number 7 test',
            num:7,
            deeperArray:[true, false, 'test', 'in', 'here', 1]
          }
        }]
      }]
    },
    {
      name: 'parent2'
    }]
  }
}
var values = obtainValues(dataObject);
// obtainValues brings back an array, hence the .join()
console.log(values.join(', ')); console.log(values);

Answer 7

Answer №4

A simple solution is as follows:

function generateHTML(obj){
   var code = ['<div class="info"></div>'];
   code.push('<div class="link">')
   if(!!obj.link) code.push(generateHTML(obj.link[0]));
   code.push('</div>')
   return code.join('')
}

document.getElementsByClassName('item')[0].innerHtml = generateHTML(obj[0]);

Answer 8

A simple solution is as follows:

function generateHTML(obj){
   var code = ['<div class="info"></div>'];
   code.push('<div class="link">')
   if(!!obj.link) code.push(generateHTML(obj.link[0]));
   code.push('</div>')
   return code.join('')
}

document.getElementsByClassName('item')[0].innerHtml = generateHTML(obj[0]);

Traverse through an array or object using recursive render functions in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to retrieve TypeScript object within a Bootstrap modal in Angular

Using React Bootstrap: Passing an array to options in Form.Control

Utilizing PHP Variables in Ajax Calls: Transferring Data between JS and PHP

What is the process for assigning default values to dynamically generated form elements?

Tips for obtaining response headers

Explore the comparison feature with jQuery's combobox

Ways to expand a Bootstrap input field by clicking on it:

How to toggle between displaying divs using JavaScript and Jquery

Error message: Parameters are not defined in the Next.js

Troubleshooting Vue 3 Computed Property Not Updating

Dealing with customized protocol responses in JavaScript

I'm having an issue with my Bootstrap tabs - they seem to be unresponsive when clicked

Error occurs in Javascript when attempting to execute javascript code using PHP's echo and an unexpected identifier token is encountered

How can we set up Node JS to automatically trigger events when a specific future date and time from the database is reached?

JSON payload with an array that includes nested JSON objects

The step-by-step guide on passing arguments and fetching results from Angular UI Bootstrap Modal through Components

Chrome reports a Javascript error: indicating that it is not recognizing the function

Is it possible to simultaneously use two $scoped variables within an Angular controller?

An error occurred with the authorization headers when attempting to retrieve the requested JSON

Customize material-ui themes using useStyles / jss