Sort and search list based on criteria

by ananyaneogi

HTML

<input type="number" name="rating" id="rating">
<button class="search-btn">Search</button>

  <ul class="search-result">
  </ul>

JavaScript

let rating;
let docFrag = document.createDocumentFragment();

const data = [
	{
  	name: 'Hello 1',
    rating: 6
  },
  {
  	name: 'Hello 2',
    rating: 1
  },
  	{
  	name: 'Hello 3',
    rating: 10
  },
   {
  	name: 'Hello 4',
    rating: 19
  }
]
$('.search-btn').on('click', function(e) {
	$('.search-result').empty();
	rating = $('#rating').val();
  const list = filterByRating();
	
  if(list.length > 0) {
  	  list.map(function(listItem, i) {
    	let li =	document.createElement('li');
  		li.innerHTML = listItem.name + ':' + listItem.rating;
      docFrag.appendChild(li);
  })
  $('ul').append(docFrag);
  } else {
  	$('ul').text('We\'re sorry! No result found. Please broaden your search criteria');
  }
  
});

function filterByRating() {
/*
	const filteredList = [];
	const result = data.filter(function(a) {
	  if (a.rating < rating) {
	      return filteredList.push(a);
	    }
	}); */
   return data.reduce((acc, item) => {
    if (item.rating <= rating) {
      acc.push(item);
    }
    return acc;
  }, []).sort((a,b) => (b.rating-a.rating));
}