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 searched through json file. my goal is to iterate through all matches and convert each lodash object to order list item of jquery listViews with the specific css format.
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');
);
please note the first item in the listview has different stylesheet (has data-theme="b" parameter)
also please note because of hardware limitation i can't use ES6. please use jquery and pure javascript for your answers. you can use .map lodash or any other data types to convert with specific css.
please note my listview filled out dynamically from javascript code
<input id='input' type='text' placeholder="Search term">
<ol id="listUl" data-role="listview" data-icon="false" style="margin-right: 5px;">
javascript jquery css json search
add a comment |
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 searched through json file. my goal is to iterate through all matches and convert each lodash object to order list item of jquery listViews with the specific css format.
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');
);
please note the first item in the listview has different stylesheet (has data-theme="b" parameter)
also please note because of hardware limitation i can't use ES6. please use jquery and pure javascript for your answers. you can use .map lodash or any other data types to convert with specific css.
please note my listview filled out dynamically from javascript code
<input id='input' type='text' placeholder="Search term">
<ol id="listUl" data-role="listview" data-icon="false" style="margin-right: 5px;">
javascript jquery css json search
add a comment |
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 searched through json file. my goal is to iterate through all matches and convert each lodash object to order list item of jquery listViews with the specific css format.
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');
);
please note the first item in the listview has different stylesheet (has data-theme="b" parameter)
also please note because of hardware limitation i can't use ES6. please use jquery and pure javascript for your answers. you can use .map lodash or any other data types to convert with specific css.
please note my listview filled out dynamically from javascript code
<input id='input' type='text' placeholder="Search term">
<ol id="listUl" data-role="listview" data-icon="false" style="margin-right: 5px;">
javascript jquery css json search
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 searched through json file. my goal is to iterate through all matches and convert each lodash object to order list item of jquery listViews with the specific css format.
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');
);
please note the first item in the listview has different stylesheet (has data-theme="b" parameter)
also please note because of hardware limitation i can't use ES6. please use jquery and pure javascript for your answers. you can use .map lodash or any other data types to convert with specific css.
please note my listview filled out dynamically from javascript code
<input id='input' type='text' placeholder="Search term">
<ol id="listUl" data-role="listview" data-icon="false" style="margin-right: 5px;">
javascript jquery css json search
javascript jquery css json search
edited Nov 15 '18 at 6:22
Hamid
asked Nov 15 '18 at 5:03
HamidHamid
206
206
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312728%2fhow-convert-lodash-object-filter-object-to-the-jquerys-listview-dynamicly%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
add a comment |
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
add a comment |
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
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
answered Nov 15 '18 at 7:06
AkrionAkrion
9,48511224
9,48511224
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312728%2fhow-convert-lodash-object-filter-object-to-the-jquerys-listview-dynamicly%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown