CODEWITHSUNDEEP
javascriptjqueryhtml
Ravi
Ravi

Reputation: 278

jQuery code to dynamically build a collapsible UL from JSON strings

I'm a new bee in the world of JavaScript and jQuery.

Can someone please help me in building a jQuery function that returns a dynamic collapsible "ul" from JSON array. I tried different solutions like jstree, jsonview, renderjson from various code repositories and some stack overflow answers, but nothing seems to be working for my use case.

Here is the sample JSON Array:

[
  {
    "name": "forwarding_options",
    "type": {
      "fields": [
        {
          "metadata": {},
          "name": "PICKUP_SERVICE",
          "nullable": true,
          "type": "string"
        },
        {
          "metadata": {},
          "name": "TWO_MAN_DELIVERY",
          "nullable": true,
          "type": "string"
        }
      ],
      "type": "struct"
    }
  },
  {
    "name": "fulfillment_time",
    "type": "string"
  },
  {
    "name": "merchant_delivery_text",
    "type": "string"
  },
  {
    "name": "status",
    "type": "string"
  },
  {
    "name": "type",
    "type": "string"
  }
]

I require something like shown in the below link, so that I can attach to a table td tag:

www.w3schools.com/howto/howto_js_treeview Thank you

Upvotes: 0

Views: 95

Answers (1)

vadivel a
vadivel a

Reputation: 1794

Hope this help you.

var jsonarr = [{
    "name": "forwarding_options",
    "type": {
      "fields": [{
          "metadata": {},
          "name": "PICKUP_SERVICE",
          "nullable": true,
          "type": "string"
        },
        {
          "metadata": {},
          "name": "TWO_MAN_DELIVERY",
          "nullable": true,
          "type": "string"
        }
      ],
      "type": "struct"
    }
  },
  {
    "name": "fulfillment_time",
    "type": "string"
  },
  {
    "name": "merchant_delivery_text",
    "type": "string"
  },
  {
    "name": "status",
    "type": "string"
  },
  {
    "name": "type",
    "type": "string"
  }
];

var ret_html = '';


jQuery.each(jsonarr, function(index, mainitem) {
  ret_html += '<li>' + mainitem['name'] + '</li>';
  jQuery.each(mainitem, function(index, items) {
    if (items['fields']) {
      ret_html += '<li><span class="caret">Fields</span>';
      ret_html += '<ul class="nested">';
      jQuery.each(items['fields'], function(index, tree) {

        ret_html += '<li>' + tree['name'] + '</li>';

      });
      ret_html += '</ul>'
      ret_html += '</li>';
    }
  });
});
jQuery('#returnresult').append(ret_html);

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
/* Remove default bullets */

ul,
#myUL {
  list-style-type: none;
}


/* Remove margins and padding from the parent ul */

#myUL {
  margin: 0;
  padding: 0;
}


/* Style the caret/arrow */

.caret {
  cursor: pointer;
  user-select: none;
  /* Prevent text selection */
}


/* Create the caret/arrow with a unicode, and style it */

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}


/* Rotate the caret/arrow icon when clicked on (using JavaScript) */

.caret-down::before {
  transform: rotate(90deg);
}


/* Hide the nested list */

.nested {
  display: none;
}


/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */

.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myUL">
  <li><span class="caret">Json array</span>
    <ul id="returnresult" class="nested">
    </ul>
  </li>
</ul>

Upvotes: 1

Related Questions