Render JSON Data into Bootstrap Nested HTML - JQuery Plugin

Question

I am trying to create a plugin that accepts data in JSON format. I would like the output to look like this: https://jsfiddle.net/ann7tctp/330/

I am trying to setup a recursive function but cannot get my head around it. The nested list depth is unknown. Please see the updated fiddle for more about what I am trying to achieve.

Any help is much appreciated!

<html>
<style>
.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item .glyphicon {
    margin-right: 5px;
}

</style>
<h1>Expected Output</h1>
<ul class="list-group list-group-root well">

  <li href="#item-1" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 1
  </li>

  <ul class="list-group collapse" id="item-1">

    <li href="#item-1-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
    </li>

    <ul class="list-group collapse" id="item-1-1">
      <li href="#" class="list-group-item">Item 1.1.1</li>
      <li href="#" class="list-group-item">Item 1.1.2</li>
      <li href="#" class="list-group-item">Item 1.1.3</li>
    </ul>

    <li href="#item-1-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
    </li>

    <ul class="list-group collapse" id="item-1-2">
      <li href="#" class="list-group-item">Item 1.2.1</li>
      <li href="#" class="list-group-item">Item 1.2.2</li>
      <li href="#" class="list-group-item">Item 1.2.3</li>
    </ul>

    <li href="#item-1-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
    </li>
    <ul class="list-group collapse" id="item-1-3">
      <li href="#" class="list-group-item">Item 1.3.1</li>
      <li href="#" class="list-group-item">Item 1.3.2</li>
      <li href="#" class="list-group-item">Item 1.3.3</li>
    </ul>

  </ul>

</ul>

<h1>JSON Data Output</h1>

<div id="nested-categories"></div>

<script>
$(function() {

var data = [
  {
    "id": 1,
    "name": "Uncategorized",
    "children": []
  },
  {
    "id": 3,
    "name": "Parent 1",
    "children": [
      {
        "id": 4,
        "name": "Child 1"
      },
      {
        "id": 5,
        "name": "Child 2"
      },
      {
        "id": 6,
        "name": "Child 3"
      }
    ]
  },
  {
    "id": 7,
    "name": "Parent 2",
    "children": [
      {
        "id": 8,
        "name": "Child 1"
      },
      {
        "id": 9,
        "name": "Child 2"
      },
      {
        "id": 10,
        "name": "Child 3"
      }
    ]
  }
];

var isInitTree = true;

    function buildTreeWithJSONArray(json,root) {

            if(isInitTree){
                isInitTree = false;
                //Create Initial element
                root.append('<ul class="list-group list-group-root in well"></ul>');
            }else{
                root.find("ul:first").append('<ul class="list-group"></ul>');
            }

            for (var i = 0; i < json.length; i++) {

                var $li = $("<li class='list-group-item' data-id='" + json[i].id + "'><span class='list-group-content'>" + json[i].name + "</span></li>");

                root.find("ul:first").append($li);

                if (typeof json[i].children !== 'undefined') {

                    //$li.data("toggle","collapse").prepend('<i class="fa fa-arrow-right"></i> ').attr('href','#list-'+json[i].id);

                    //root.find('ul.list-group:first').attr("id",'list-'+json[i].id).addClass('collapse');

                    buildTreeWithJSONArray(json[i].children, $li);
                }
            }
        }


        //Run the Recursive function..

   buildTreeWithJSONArray(data,$("#nested-categories"));




  $('.list-group-item').on('click', function() {
    $('.glyphicon', this)
      .toggleClass('glyphicon-chevron-right')
      .toggleClass('glyphicon-chevron-down');
  });

});
</script>
</html>

Carlos Valencia · Accepted Answer · 2017-04-27 20:24:50Z

1

What is happening with your code is, when you are calling the recursive function, you are validating whether the root is the init Tree, and of course it will not be as it the variable isInitTree has been updated to false, hence your code says, it should find a ul inside the root element, when in your case, is the li element you are sending as a parameter.

It will not find any ul elements as there are not any inside the li you have sent so it will do nothing.

try:

if(isInitTree){
    isInitTree = false;
    //Create Initial element
    root.append('<ul class="list-group list-group-root in well"></ul>');
 }else{
    root.append('<ul class="list-group"></ul>');
}

Please see your updated fiddle, which will hopefully put you in the right direction.

edited Apr 27, 2017 at 20:24

answered Apr 27, 2017 at 19:25

Carlos Valencia

7,0532 gold badges32 silver badges46 bronze badges

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

4 Comments

Carl Smith Over a year ago

Hi, thanks for your answer, that is what I tried initially before posting this question. It is still not quite there. Changing that is building the tree <ul> inside the <li> which would work but not with the bootstrap CSS classes.

Carlos Valencia Over a year ago

see the updated fiddle, it does what you are looking for, but please be more specific on your questions, Boostrap has a very specific DOM layout needed for it's JS functions to work, you did not mention you intended to achieve that layout explicitly.

Carl Smith Over a year ago

Thanks so much you are a pro! Can you re-update the fiddle and resend me the link please? Is has not saved properly... I will be more specific next time!

Carlos Valencia Over a year ago

do remember to accept the answer if you've found it helpful, cheers

Collectives™ on Stack Overflow

Render JSON Data into Bootstrap Nested HTML - JQuery Plugin

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related