如何将 lodash 对象（过滤器对象）动态转换为 jquery listview
Posted
技术标签:
【中文标题】如何将 lodash 对象（过滤器对象）动态转换为 jquery listview【英文标题】：how convert lodash object (filter object) to the jquery's listview dynamicly 【发布时间】：2019-04-18 03:48:41 【问题描述】：作为第一步使用这个主题的答案 how to case insentive contain search with lodash
我的下一步是（我的第二个目标）我使用过滤器返回通过 json 文件搜索到的所有包含匹配项。我的目标是遍历所有匹配项并将每个 lodash 对象转换为具有特定 css 格式的 jquery listViews 的顺序列表项。
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); // <-- change to use the new search fn
if (!result)
console.log('Nothing found');
else
console.log('Go to ' + result.video_url);
var ind = 0;
listLength = result.length;
//FIXME
listhtml = $.map(result, function(entry)
ind++;
//FIXME
if (ind === 1)
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');
);
请注意列表视图中的第一项具有不同的样式表（具有 data-theme=\"b\" 参数） 另请注意，由于硬件限制，我无法使用 ES6。请使用 jquery 和纯 javascript 作为您的答案。您可以使用 .map lodash 或任何其他数据类型与特定的 css 进行转换。
请注意我的列表视图是从 javascript 代码动态填写的
<input id='input' type='text' placeholder="Search term">
<ol id="listUl" data-role="listview" data-icon="false" style="margin-right: 5px;">
【问题讨论】：
【参考方案1】：您正在处理一个数组，因此您可以使用 lodash isEmpty 检查其中是否有任何项目。此外，您不需要使用单独的计数器来跟踪索引，因为 jquery 映射（并且任何 map 都将索引作为其第二个参数）。
你可以试试这样的：
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');
);
你可以看到working here
【讨论】：
以上是关于如何将 lodash 对象（过滤器对象）动态转换为 jquery listview的主要内容，如果未能解决你的问题，请参考以下文章