Using ES6 Classes

Visit http://weblogs.asp.net/dwahlin/getting-started-with-es6-using-classes for more details.

HTML

<div id="divID"></div>

CSS

div {
  line-height: 30px;
}

Babel + JSX

let animals_order = 'Funny Pig, Angry Lion, Little Rabbit';

//data from API call
//can be many more items
	let data = [
    {
      result : [
        {
          name: "Angry Lion 2"
        },
        {
          name: "Funny Pig 1"
        },
        {
          name: "Funny Pig 2"
        },
        {
          name: "Angry Lion 1"
        },
        {
          name: "Funny Pig 3"
        },
        {
          name: "Little Rabbit 2"
        },
        {
          name: "Little Rabbit 1"
        }
      ]
    }
  ]

function order () {
	data.forEach(item => {
  	item.result.sort((a, b) => a.name.localeCompare(b.name));
    item.result.sort((a, b) => {
      return animals_order.indexOf(a.name.split(' ')[0]) > animals_order.indexOf(b.name.split(' ')[0]) ? 1 : -1;
    });
  })
}


function display() {
  data[0].result.forEach(assignment => {
  	document.getElementById('divID').innerHTML += "<br />" + assignment.name;
	}
)}

order();
display()