CODEWITHSUNDEEP
javascripthtmlcss
Stevenson
Stevenson

Reputation: 637

Javascript: Sorting user input chronologically

Hopefully, I am not over thinking this. How should I approach sorting user input chronologically, with the oldest movie being displayed first in a newly sorted list?

example:

1980 - The Empire Strikes back
1996 - Independence Day
1997 - Titanic

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>

<body>

    <form>
        Year: <br>
        <input id="year" type="text"><br>
        Movie:<br>
        <input id="mName" name="MovieName" type="text"><br>
    </form>
    <br>
    <button onclick="myFunction(list)" type="submit">Submit</button>

    <div id="container">
        <ul id="list">
        </ul>
    </div>
    <script src="assets/js/main.js">

    </script>
</body>
</html>

JS

function myFunction(list){
    var text = "";
    var inputs = document.querySelectorAll("input[type=text]");
    for (var i = 0; i < inputs.length; i++) {
        text +=  inputs[i].value;
    }


    var li = document.createElement("li");
    var node = document.createTextNode(text);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);
}

Upvotes: 2

Views: 1699

Answers (5)

Rayon
Rayon

Reputation: 36599

Update the DOM after every insertion of the li Element.

  • Instead of inserting year and name as plain text, wrap it in span to be access using DOM-api(querySelector/All)

  • Use Array.from to create new Array instance from an array-like or iterable object

  • Sort the collection using Array#sort

  • Append the sorted array to the parent UL element in Array#forEach loop

function myFunction(list) {
  var text = "";
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length; i++) {
    text += '<span>' + inputs[i].value + '</span>';
  }
  var li = document.createElement("li");
  li.innerHTML = text;
  document.getElementById("list").appendChild(li);
  var liElemens = document.querySelectorAll('#container #list li');
  liElemens = Array.from(liElemens);
  liElemens.sort(function(a, b) {
    var aSpan = +a.children[0].textContent;
    var bSpan = +b.children[0].textContent;
    return aSpan > bSpan;
  });
  var parent = document.querySelector('#list');
  while (parent.hasChildNodes()) {
    parent.removeChild(parent.firstChild);
  }
  liElemens.forEach(function(elem) {
    parent.appendChild(elem);
  });
}
<form>
  Year:
  <br>
  <input id="year" type="text">
  <br>Movie:
  <br>
  <input id="mName" name="MovieName" type="text">
  <br>
</form>
<br>
<button onclick="myFunction(list)" type="submit">Submit</button>

<div id="container">
  <ul id="list">
  </ul>
</div>

Upvotes: 2

Gayathri Mohan
Gayathri Mohan

Reputation: 2962

var arraylist = [];

function myFunction(list) {
  var year = document.getElementById("year").value;
  var mName = document.getElementById("mName").value;
  var obj = {};
  obj.year = parseInt(year);
  obj.mName = mName;
  arraylist.push(obj);
  var sortedAsc = _.sortBy(arraylist, 'year');
  $('#list').empty();
  for (var i = 0; i < sortedAsc.length; i++) {
    console.log('-----------')
    var li = document.createElement("li");
    var node = document.createTextNode(sortedAsc[i].year + " " + sortedAsc[i].mName);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);
  }
}

for reference https://plnkr.co/edit/mi3rtENJWQlzipfsO6Ur?p=preview

Upvotes: 1

Jeremy Iglehart
Jeremy Iglehart

Reputation: 4499

I'm a big fan of the javascript library UnderscoreJS.

This is most likely the approach I would use. I would most likely order my javascript in an object, and then sort the items in that object. Here is a great blog article which talks all about it.

Of course, you could probably do this with simple arrays, but why not use the full object literal capabilities of javascript?

Here is an example on how to sort using underscore:

let list = [
  {year: "2004", title: "Superman IV"},
  {year: "1974", title: "Superman"},
  {year: "1994", title: "MythBusters"},
  {year: "1984", title: "Ghostbusters"},
];

console.log("Unsorted List");
console.log(list);

// First by Title, then by Year
let sorted = _.sortBy(list, 'year');

console.log("Sorted List");
console.log(sorted);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Upvotes: 1

Femi
Femi

Reputation: 1322

You need to implement a data structure for the elements already in your list. Then you need to evaluate those extant elements in the list to determine where to insert the new element.

One idea is to just use an array internally to hold the entries of the list. Another idea is to sequentially check li DOM elements for the year they contain.

If you choose to actually use the native li DOM elements as your primary data structure, you may want to find a sorting algorithm to use.

The advantage of using a built-in array is that you can use the browser's native sort function which may be more efficient than a naive linear search method. However, this difference likely won't be noticeable unless you have a really big list.

Upvotes: 1

Shubham Jain
Shubham Jain

Reputation: 1984

Counting sort would be good here as year will mostly range from 1900 to 2016 (Make it 2100 , if you don't want your code to break at any upcoming year). It can sort in O(n) time.

Google Counting sort. You will find various implementations.

Upvotes: 0

Related Questions