Create nested list items with given depths in JavaScript

Question

I'm trying to make nested list items with the data below:

It creates the right indentation when depths are sorted with -1 +1 but I can't make the perfect indentation. Any help will be appreciated.

const data = [ 
 {depth: 1, title: "Some Title Goes Here - First Title", url: "#some-title-goes-here-first-title-prs7ztig15"},
 {depth: 2, title: "Yuck Almost Got it!", url: "#yuck-almost-got-it-qlx0i4727h"},
 {depth: 1, title: "Whoops! Something went Wrong", url: "#whoops-something-went-wrong-qoflcur4iw"},
 {depth: 1, title: "Don't Worry We Get You Covered", url: "#dont-worry-we-get-you-covered-ug4kxqz4kp"},
 {depth: 3, title: "I Hate Writing Titles", url: "#i-hate-writing-titles-jrlw78vulm"},
 {depth: 4, title: "Gonna Start to Lorem", url: "#gonna-start-to-lorem-whzh8e3qus"},
 {depth: 2, title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptate!", url: "#lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit-quisquam-voluptate-agxlhkvs8c"},
 {depth: 1, title: "Consectetur adipisicing elit. Quo, corporis!", url: "#consectetur-adipisicing-elit-quo-corporis-4xurvdulcn"},
 {depth: 1, title: "Dolor sit amet, consectetur adipisicing elit. Fugiat, quae?", url: "#dolor-sit-amet-consectetur-adipisicing-elit-fugiat-quae-txu46oaitk"},
 {depth: 2, title: "Adipisicing elit. Dolor, rem.", url: "#adipisicing-elit-dolor-rem-x6coih7o36"},
 {depth: 3, title: "Elit. Consequuntur, cum.", url: "#elit-consequuntur-cum-zqyhfglbd4"},
 {depth: 4, title: "Ipsum dolor sit amet.", url: "#ipsum-dolor-sit-amet-sz09eh07ma"},
 {depth: 2, title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, corporis!", url: "#lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit-quo-corporis-18g13jn4j5"}]


function getTOCOutput(data) {
  if (data.length < 1) return '';
  let tocOutput = "<ul>";
  let currentDepth = data[0].depth;
  let c = data.length;

  for (let i = 0; i < c; i++) {
    let itemDepth = data[i].depth;
    if (currentDepth === itemDepth) {
      tocOutput += '<li><a href="' + data[i].url + '">' + data[i].title + '</a>';
    } else if (currentDepth < itemDepth) {
      tocOutput += '<ul><li><a href="' + data[i].url + '">' + data[i].title + '</a>';
    } else {
      tocOutput += '</li>' + '</ul>'.repeat(currentDepth - itemDepth) + '<li><a href="' + data[i].url + '">' + data[i].title + '</a></li>';
    }
    currentDepth = data[i].depth;
  }
  tocOutput += "</ul>";
  return tocOutput;
}
document.body.innerHTML += getTOCOutput(data);

trincot · Accepted Answer · 2021-04-06 16:49:42Z

You can use two while loops inside the for loop in order to account for the depth changes. They repeat until the current depth is right:

function getTOCOutput(data) {
    let currentDepth = 0;
    let tocOutput = "";
    for (let {depth, title, url} of data) {
        while (depth > currentDepth) {
            tocOutput += "<ul>";
            currentDepth++;
        }
        while (depth < currentDepth) {
            tocOutput += "</ul>";
            currentDepth--;
        }
        tocOutput += '<li><a href="' + url + '">' + title + '</a>';
    }
    return tocOutput;
}

let data = [{depth: 1, title: "Some Title Goes Here - First Title", url: "#some-title-goes-here-first-title-prs7ztig15"},{depth: 2, title: "Yuck Almost Got it!", url: "#yuck-almost-got-it-qlx0i4727h"},{depth: 1, title: "Whoops! Something went Wrong", url: "#whoops-something-went-wrong-qoflcur4iw"},{depth: 1, title: "Don't Worry We Get You Covered", url: "#dont-worry-we-get-you-covered-ug4kxqz4kp"},{depth: 3, title: "I Hate Writing Titles", url: "#i-hate-writing-titles-jrlw78vulm"},{depth: 4, title: "Gonna Start to Lorem", url: "#gonna-start-to-lorem-whzh8e3qus"},{depth: 2, title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptate!", url: "#lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit-quisquam-voluptate-agxlhkvs8c"},{depth: 1, title: "Consectetur adipisicing elit. Quo, corporis!", url: "#consectetur-adipisicing-elit-quo-corporis-4xurvdulcn"},{depth: 1, title: "Dolor sit amet, consectetur adipisicing elit. Fugiat, quae?", url: "#dolor-sit-amet-consectetur-adipisicing-elit-fugiat-quae-txu46oaitk"},{depth: 2, title: "Adipisicing elit. Dolor, rem.", url: "#adipisicing-elit-dolor-rem-x6coih7o36"},{depth: 3, title: "Elit. Consequuntur, cum.", url: "#elit-consequuntur-cum-zqyhfglbd4"},{depth: 4, title: "Ipsum dolor sit amet.", url: "#ipsum-dolor-sit-amet-sz09eh07ma"},{depth: 2, title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, corporis!", url: "#lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit-quo-corporis-18g13jn4j5"},];

document.body.insertAdjacentHTML("beforeend", getTOCOutput(data));

Thank you for the reply. Maybe it's not returning the perfect list but it works as expected eventually. You're awesome!

Collectives™ on Stack Overflow

Create nested list items with given depths in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related