JSFiddle - React, Tailwind, and code Playground

by SyedNizamChennai

HTML

<div ng-app='sortModule'>
<div  ng-controller='sortController'>
    <h1>Unsorted colors</h1>
    <ul>
        <li ng-repeat='item in colorsArray track by $index'><span style="background-color:{{item.code}}">{{item.color}}</span> - {{item.id}}</li>
    </ul>
    <h1>Sorted by color</h1>
    <ul>
        <li ng-repeat='item in sortedColors track by $index'><span style="background-color:{{item.code}}">{{item.color}}</span> - {{item.id}}</li>
    </ul>
</div>
</div>

JavaScript

var app = angular.module('sortModule', [])
app.factory('sortFactory', function(){
		var sortedColors = []
    var shouldPush = true;
    return {
        sortColors: function(colorsArray){
        	var colorsOrder = [{color:'green'},{color:'yellow'},{color:'blue'},{color:'red'}]      
          for(color in colorsOrder) {
            for(objColor in colorsArray)	 {
            	shouldPush = colorsOrder[color].color === colorsArray[objColor].color ? true : false
              if(shouldPush) {sortedColors.push(colorsArray[objColor]);}              
            }
          }
          return sortedColors;
        }
    }               
});
app.controller('sortController', function($scope,sortFactory){    
    $scope.colorsArray = [{id: '1',color: 'red',code : '#ff0000'},{id: '2',color: 'blue',code : '#0000ff'},{id: '3',color: 'red',code : '#ff0000'},{id: '4',color: 'yellow',code : '#ffff00'},{id: '5',color: 'green',code : '#00ff00'}];
    $scope.sortedColors = sortFactory.sortColors($scope.colorsArray) 
});