How can I render list items dynamically and recursively from a nested array?

Question

Given the output, I want to list <li> dynamically

results = [
  {
    name: 'a1',
    results: []
  },
  {
    name: 'a2',
    results: [
      {
        name: 'b1',
        results: []
      },
      {
        name: 'b2',
        results: [
          {
            name: 'c1',
          }
        ]
      }
    ]
  },
  {
    name: 'a3',
  }
]

This is expected output

<li>a1</li>
<li>a2</li>
<li>b1</li>
<li>b2</li>
<li>c1</li>
<li>a3</li>

My pseudo-code but I think this is not even close... I think I need "recursive" solution to tackle this problem

input.map((r) => {
  if(r) {
    return renderResult(r);
  } <<< This is not a recursive way...
  return renderResult(r.results.?);
});

How do I list this dynamically and recursively?

farvilain · Accepted Answer · 2020-11-02 17:54:51Z

1

Your solution is nearly this one

function generate(arr) {
  const items = [];
  arr.forEach( i => {
    items.push(i.name); //Or whatever you want
  });
  return items;
}

Just introduce recursivity

function generate(arr) {
  const items = [];
  arr.forEach( i => {
    items.push(i.name);

    if( !!i.results ){
      const subs = generate(i.results);
      subs.forEach( s => items.push(s));
    }
  });
  return items;
}

answered Nov 2, 2020 at 17:54

farvilain

2,5622 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

merry-go-round Over a year ago

How do I build <li> with it? If we can avoid preprocessing and render it dynamically, that will be great

farvilain Over a year ago

Well maybe you should participate at least a little bit in your own work don't you think? I solved the 'hard' part, the recursion. Now the rest is up to you. :)

Anthony Gedeon · Accepted Answer · 2020-11-02 20:42:43Z

Here's my take on the problem!

For dynamically inserting the li tags into the dom, use createElement and append!

const results = [
  {
    name: 'a1',
    results: []
  },
  {
    name: 'a2',
    results: [
      {
        name: 'b1',
        results: []
      },
      {
        name: 'b2',
        results: [
          {
            name: 'c1',
          }
        ]
      }
    ]
  },
  {
    name: 'a3',
  }
]

const getNames = (list) => {
    
    const names = [];

    function getDeepNames(list) {

        for (let obj of list) {

            names.push(obj.name);

            if (Array.isArray(obj.results)) {
                getDeepNames(obj.results);
            }

        }

        return names;
    }

    return getDeepNames(list)
}

console.log(getNames(results))

Collectives™ on Stack Overflow

How can I render list items dynamically and recursively from a nested array?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related