JSON To HTML List Generator - jQuery json-list

json-list is a lightweight, jQuery based JSON To List generator that dynamically renders a nested HTML ordered/unordered list from hierarchical JSON data.

How to use it:

1. Create a container (or an empty ul or ol element) in which you want to show the generated list.

<div class="example">
</div>

<!-- OR -->
<ul class="example">
</ul>

2. Insert jQuery JavaScript library and the jQuery json-list plugin's script into your page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.json-list.js"></script>

3. Define your JSON data as these:

// example.json
{
  "locationGroups": [
    {
      "id": 1,
      "name": "AU - NSW",
      "editable": false,
      "children": [1, 2],
      "subGroups": []
    },
    {
      "id": 2,
      "type": "group",
      "name": "AU - QLD",
      "editable": false,
      "children": []
    },
    {
      "id": 3,
      "type": "group",
      "name": "AU - SA",
      "editable": false,
      "children": [3]
    },
    {
      "id": 4,
      "type": "group",
      "name": "Metropolitan",
      "editable": true,
      "children": [2]
    }
  ],
  "locations": [
    {
      "id": 1,
      "name": "Neutral Bay"
    },
    {
      "id": 2,
      "name": "North Sydney",
      "selected": true
    },
    {
      "id": 3,
      "name": "Valley View"
    }
  ]
}

4. Call the function and specify the data source you want to fetch.

$('.example').jsonList({
  url: 'example.json',
  type: 'groupedItems',
  groups: 'locationGroups',
  items: 'locations'
});

5. Execute a callback function for each list item created from the JSON.

onListItem: function(event, listItem, data, isGroup) {
  // ...
},

6. Execute a callback function called after the HTML list is created.

onSuccess: function(event, jsonList) {
  // ...
}

7. All default plugin options and callbacks.

$('.example').jsonList({
  type: 'groupedItems',
  url: null,
  data: null,
  groupLabel: 'name',
  itemLabel: 'name',
  onSuccess: function(jsonList) {},
  onListItem: function(event, listItem, data, isGroup) {},
  onResponse: function(data, textStatus) {}
});

---

This awesome jQuery plugin is developed by aexmachina. For more Advanced Usages, please check the demo page or visit the official website.