How Convert Lodash Object (filter Object) To The Jquery's Listview Dynamicly

as using answer of this topic for the first step how to case insentive contain search with lodash my next step is (my second goal) i use filter to return all the contain matches se

Solution 1:

You are dealing with an array so you can use lodash isEmpty to check if it has any items in it. Also you do not need to use a separate counter to track the index since jquery map (and any map has the index as its 2nd argument).

You can try something like this:

 function search(data, term) {
   return_.filter(data, function(x) {
     return_.includes(_.toLower(x.title), _.toLower(term))
   })
 }

 document.getElementById('input').addEventListener('change', function() {
   var name = document.getElementById('input').value;
   const data = [{
     "video_url": "http://63.237.48.3/ipnx/media/movies/Zane_Ziadi_HQ.mp4",
     "title": "Zane Ziadi"
   }, {
     "video_url": "http://63.237.48.3/ipnx/media/movies/DarBastAzadiHQ.mp4",
     "title": "Darbast Azadi"
   }, {
     "video_url": "http://63.237.48.3/ipnx/media/movies/Cheghadr_Vaght_Dari_HQ.mp4",
     "title": "Cheghadr Vaght Dari"
   }, {
     "video_url": "http://63.237.48.3/ipnx/media/movies/Mashaal_HQ.mp4",
     "title": "Mashaal"
   }, {
     "video_url": "http://63.237.48.3/ipnx/media/movies/Red_Carpet_HQ.mp4",
     "title": "Red Carpet"
   }]

   var result = search(data, name);
   if (_.isEmpty(result)) {
     console.log('Nothing found');
   } else {
     listHTML = $.map(result, function(entry, i) {
       if (i ==0) {
         return"<li class=\"itemListClass\" id=\"movieListId\" data-theme=\"b\" style=\"padding-top:25px;padding-left: 15px;line-height:70px\"><a style=\"font-size:1.5em;\" class=\"list\"  href='"+ entry.video_url +"'>"+ entry.title +"</a></li>";
       } else {
         return"<li class=\"itemListClass\" id=\"movieListId\" style=\"padding-left: 15px;margin-left: 10px;line-height:70px\"><a style=\"font-size:1.5em;\" class=\"list\"  href='"+ entry.video_url +"'>"+ entry.title +"</a></li>";
       }
     }).join('');
     $("#listUl").append(listHTML).listview("refresh").trigger('create');
   }
 });

You can see it working here