large list sorter

by merganser

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="div1">

  <ul id="original" class="connectedSortable">

  </ul>

</div>

<div id="div2">
  <ul id="sortablelistAbove" class="connectedSortable">

  </ul>
  <ul id="sortablelistMaintain" class="connectedSortable">

  </ul>
  <ul id="sortablelistBelow" class="connectedSortable">

  </ul>
</div>

CSS

div {
  float: left;
}

#div1 {
  width: 400px;
  background-color:red;
}

#div2 {
  width: 400px;
  background-color:blue;
  min-height:300px;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
  cursor:move;
}
 
li:last-child {
  border: none;
}
 
li {
  text-decoration: none;
  color: #000;
  display: block;
 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
 
li:hover {
  font-size: 30px;
  background: #f6f6f6;
}



ul#sortablelistAbove {
 display:block;
 min-height:50px;
 background-color:yellow;
}
ul#sortablelistMaintain {
 display:block;
 min-height:50px;
 background-color:grey;
 
}
ul#sortablelistBelow {
 display:block;
 min-height:50px;
 background-color:green;
 
}

JavaScript

var db = {
  t_arr: JSON.parse(localStorage.getItem('tests')) || [],
  get tests() {
    return this.t_arr
  },
  set tests(v) {
    if (v.constructor === Array) {
      this.t_arr = v
    }
    localStorage.setItem('tests', JSON.stringify(this.t_arr));
    
  }
}

console.log('db', db);

if (db.tests.length === 0) {
  $.getJSON("https://data.consumerfinance.gov/resource/jhzv-w97w.json",
    function(data) {

      console.log('data pull completed');

			db.tests = data;
//localStorage.setItem('tests', JSON.stringify(data));
      console.log('item array filled');

      console.log('db', db);
    });

}

/*
$('#original') 
  .append(db.tests.join("")
  );
*/

var cList = $('ul#original');
db.tests.map( (item,i ) => {
      var li = $('<li/>')
        .addClass('ui-item')
        .attr('role', 'item')
        .appendTo(cList);
      var aaa = $('<a/>')
        .addClass('ui-all')
        .text(i + ': ' + item.company)
        .appendTo(li);
    });
  
$( function() {
    $( "#original,#sortablelistAbove,#sortablelistMaintain,#sortablelistBelow" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );  
  
function filterList(name)  {

db.tests.filter(function(test) { return test.money > 1000 });

}