Get data from HTML list to array

Question

I'm using SortableJS and have a nested sortable list.

With the following script I get an JSON string with each that changed.

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

for( var i = 0; i < nestedSortables.length; i++ )
{
    new Sortable( nestedSortables[i], {
        group: 'nested',
        dataIdAttr: 'data-id',
        fallbackOnBody: true,
        swapThreshold: 0.65,
        store: {
            set: function (evt) {
                var order = evt.toArray();
                console.log("Order: "+ JSON.stringify( order ) );
            }
        }
    });
}

The problem is that I need the whole tree as an JSON string or array to store it and not only the values of the that have changes in.

How can I get an array with the whole tree?

GrafiCode · Answer

You could store all nested sortables inside an array, and then get the order from each of them on set.

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

// ARRAY TO STORE ALL NESTED SORTABLES
const sortables = []

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

  var sortable = Sortable.create(nestedSortables[i], {
    group: 'nested',
    dataIdAttr: 'data-id',
    fallbackOnBody: true,
    swapThreshold: 0.65,
    store: {
      set: function(sortable) {
        // ITERATE EACH NESTED SORTABLE IN OUR ARRAY
        for (let s of sortables) {
          // GET THE ORDER OF THIS SORTABLE
          let order = s.toArray();
          console.log(order.join('|'));
        }
      }
    }
  });

  // PUSH THE NEW SORTABLE IN OUR ARRAY
  sortables.push(sortable)

}




  Item 1.1
    
      Item 2.1
      Item 2.2
        
          Item 3.2
          Item 3.3
          Item 3.4
        
      
      Item 2.3
      Item 3.1
      Item 2.4
    
  
  Item 1.2
  Item 1.3
  Item 1.4
    
      Item 2.1
      Item 2.2
      Item 2.3
      Item 2.4
    
  
  Item 1.5

Get data from HTML list to array

1 Answers