title: How To Get The Order Of A Nested List Using SortableJS & jQuery
body: <p>I am trying to use <a href="https://github.com/SortableJS/Sortable" rel="nofollow noreferrer">SortableJS</a> &amp; <a href="https://github.com/SortableJS/jquery-sortablejs" rel="nofollow noreferrer">jQuery SortableJS Binding</a> to create a nested list, log the new order of the list, and it's children (like a hierarchal structure) via <code>console.log()</code>.</p>
  
  <p>I have already tried <a href="https://stackoverflow.com/a/56589385/12232340">this solution</a> which returned null.</p>
  
  <p>This is my code and an example of its functionality:</p>
  
  <p>Javascript (uses a small mix of Laravel):</p>
  
  <pre><code>@foreach($categories as $category)
  $(document).ready(function() {
      var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable-{{$category-&gt;id}}'));
      // Loop through each nested sortable element
      for (var i = 0; i &lt; nestedSortables.length; i++) {
          $([nestedSortables[i]]).sortable({
              group: 'nested',
              animation: 150,
              fallbackOnBody: true,
              swapThreshold: 0.65,
              store: {
                  set: function (sortable) {
                      var order = sortable.toArray();
                      //var catID = document.getElementById("sortable-cards-{{$category-&gt;id}}").getAttribute("data-catid");
                      const nestedQuery = '.nested-sortable-{{$category-&gt;id}}';
                      const identifier = 'boardId';
                      const parentId = 'parentId';
                      const boardName = 'boardName';
                      const root = document.getElementById('boardsList-{{$category-&gt;id}}');
                      function serialize(sortables) {
                          var serialized = [];
                          var children = [].slice.call(sortables.children);
                          for (var i in children) {
                              var nested = children[i].querySelector(nestedQuery);
                              serialized.push({
                                  board_name: children[i].dataset[boardName],
                                  board_id: children[i].dataset[identifier],
                                  parent_id: children[i].dataset[parentId],
                                  children: nested ? serialize(nested) : []
                              });
                          }
                          return serialized;
                      }
                      var child_order = serialize(root);
                      console.log(child_order);
                      console.log(order);
                  }
              }
          });
      }
  });
  @endforeach
  </code></pre>
  
  <p>HTML (uses a mix of PHP):</p>
  
  <pre><code>&lt;div id="boardsList" class="list-group nested-sortable"&gt;
     &lt;div class="list-group nested-sortable"&gt;
         &lt;div class="list-group-item" data-cat-id="{{$board-&gt;category_id}}" data-board-id="{{$board-&gt;id}}" data-parent-id="{{$board-&gt;parent_id}}"&gt;{{$board-&gt;name}}
             &lt;div class="list-group nested-sortable"&gt;
                 &lt;div class="list-group-item" data-cat-id="{{$board-&gt;category_id}}" data-board-id="{{$board-&gt;id}}" data-parent-id="{{$board-&gt;parent_id}}"&gt;{{$board-&gt;name}}
                     &lt;div class="list-group nested-sortable"&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="list-group nested-sortable"&gt;
             &lt;div class="list-group-item" data-cat-id="{{$board-&gt;category_id}}" data-board-id="{{$board-&gt;id}}" data-parent-id="{{$board-&gt;parent_id}}"&gt;{{$board-&gt;name}}
                 &lt;div class="list-group nested-sortable"&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>console.log() Output Of The Order:
  <a href="https://i.stack.imgur.com/aNNvP.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aNNvP.gif" alt="sortableexample"></a></p>
  
  <p>Instead of returning all of the order results. It only returns "Clone Wars" &amp; "Staff Applications" order results. How would I be able to retrieve all results (parents and children)?</p>
  
  <p>Thank you for your help, if you need more information please let me know.</p>