Dynamic Nested UI and Tree View Tutorial

createList_1.js

const createList = (items) => {
  switch ($.type(items)) {
    case "object":
      console.log(items);
      break;
    case "string":
      console.log(items);
      break;
    case "array":
      console.log(items);
      break;
  }
}

createList_2.js

// evaluate expressions
const createList = (items) => {
  switch ($.type(items)) {
    case "object":
      getItems(items);
      break;
    case "string":
      markupArray.push(`<li> <span> ${items} </span> </li>`);
      break;
    case "array":
      console.log(items);
      break;
  }
};

createList_3.js

// evaluate expressions
const createList = (items) => {
    // code removed for brevity
    case "array":
      items.forEach((item) => {
        createList(item);
      });
      break;
  }
};

createList_4.js

// evaluate expressions
const createList = (items) => {
  switch ($.type(items)) {
    case "object":
      getItems(items);
      break;
  }
};

data_1.js

const data = {
  Parent: "Childa",
};

data_2.js

const data = {
  Parent: ["Child 1", "Child 2", {Child3:'Sub Child'}],
};

// OR
const data = {
  Parent: {
    Child1: "Child 1",
    Child2: {Child21: "Child 21", Child22: "Child 22"},
    Child3: [
      "Child 31",
      "Child 32",
      { Child33: "Sub Child" },
      { Child4: ["Child 41", "Child 42", { Child43: "Sub Child" }] },
    ],
  },
};

data_3.js

// add a parent with some details
const data = {
  Parent: {
    name: "Jan Doe",
    age: "50",
    img: "father.png",
  },
};

data_4.js

const data = {
  Parent: {
    img: "father.png",
    name: "Jan Doe",
    age: "50",
    children: [
      {
        child: {
          img: "child_1.png",
          name: "child 1",
          age: "25",
        },
      },
    ],
  },
};

getDetails_1.js

// get details
const getDetails = (details) => {
  // iterate over the detail items of object
  for (const detail in details) {
    // fetch the value of each item
    markupArray.push(`<span> ${details[detail]} </span>`);
  }
};

getDetails_2.js

// get details
const getDetails = (details) => {
  // iterate over the detail items of object
  for (const detail in details) {
    // fetch the value of each item

    if (detail == "img") {
      markupArray.push(
        `<img src="./img/${details[detail]}" alt="${details[detail]}">`
      );
    } else {
      markupArray.push(`<span> ${details[detail]} </span>`);
    }
  }
};

getDetails_3.js

// get details
const getDetails = (details) => {
  // iterate over the detail items of object
  for (const detail in details) {
    // fetch the value of each item
    if (detail == "img") {
      markupArray.push(
        `<img src="./img/${details[detail]}" alt="${details[detail]}">`
      );
    } else if (detail == "children") {
      markupArray.push("<ul>");
      details[detail].forEach((element) => {
        getItems(element);
      });

      markupArray.push("</ul>");
    } else {
      markupArray.push(`<span> ${details[detail]} </span>`);
    }
  }
};

getItems_1.js

// get items in the object
const getItems = (items) => {
  for (const item in items) {
    // push li tags for parent
    // with nested opening ul tag for children
    markupArray.push(`<li> <a> ${item} </a> <ul>`);
    // evaluate expression for children
    createList(items[item]);
    // push closing tage
    markupArray.push("</ul></li>");
  }
};

getItems_2.js

// get items in the object
const getItems = (items) => {
  for (const item in items) {
    markupArray.push(`<li> ${item}`);
    markupArray.push("</li>");
  }
};

getItems_3.js

// get items in the object
const getItems = (items) => {
  for (const item in items) {
    markupArray.push(`<li> ${item}`);
    // fetch the parent object
    let details = items[item];
    getDetails(details);
    // push the closing tag for parent
    markupArray.push("</li>");
  }
};

index_1.html

<ul>
  <li>Parent
    <ul>
      <li> <span> Child </span> </li>
    </ul>
  </li>
</ul>   

main.js

// call the function on page load
window.onload = () => {
  createList(data);
  markupArray.push("</ul>");
  $("#list").html(markupArray.join(""));
};