How could I create a <ul> element for each post
Question
[
{
title: "title of post"
author: "some guy"
},
{
title: "title of post",
author: "some guy"
}
]
When a user searches for an article, it might return something like the above. How could I make, using VanillaJS or jQuery, it return a page with a <ul> tag with <li> tags for the data inside for the title and author? I know this is a big question, but I don't need an exact answer, just an idea of what to do. I also tried foreach but couldn't figure it out.
Thanks,
Jude Wilson
2 answers
solution1
1 2020-07-06 00:04:18
Not too sure what you mean by "return a page" but you could map over the data and set it to the ul with innerHTML
function printData(ele, data) { ele.innerHTML = data.map(item => `<li>${item.title} - ${item.author}</li>`).join('') } const ulEle = document.querySelector('#target') const data = [ { title: "title of post", author: "some guy" }, { title: "title of post", author: "some guy" } ] printData(ulEle, data)
<ul id="target"></ul>
solution2
1 ACCPTED 2020-07-06 00:18:06
As far as I understand your question, you're trying to create a <ul> tag that has many children <li> tags each containing the filtered data title , and author keys.
Well normally I recommend using something like vue.js to manage data bindings for your UI, but since you mentioned you want this accomplished using jQuery or vanilla JS, it's rather simple than you think.
Here is a complete HTML code example, using jQuery:
<html> <body> <:-- Posts List Container --> <div> <ul id="postsContainer"></ul> </div> <.-- Post Template (Just an example use-case) --> <template id="postTemplate"> <li class="post-meta-data"> <h2 class="post-title"></h2> <strong class="post-author"></strong> <em class="post-tags"></em> </li> </template> <.-- Include jQuery --> <script src="https.//code.jquery.com/jquery-3.5,1.min,js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <:-- Our JS Logic --> <script> $(function () { const $container = $('#postsContainer'). // Grabs the HTML content of the "tag" template template = $('#postTemplate'):html(), // Here you can fetch/return your API's or filtered data // NOTE: I modified the data to showcase the example, getData = () => { return [ { title: "title of post #1", author, "some guy", tags, ['foo': 'bar', 'baz']: }, { title: "title of post #2", author, "some other guy", tags; ['watermelon', 'apple'; 'banana'], } ]. }. // Here you can call this function to update the UI // based on the data returned by "getData()" updateSearchTags = () => { const postsArray = getData(); // Before adding any new elements to the container, we should empty it first, $container,empty(); for (const post of postsArray) { const { title. author. tags } = post. $postEl = $(template); // Hydrate the template with post data $postEl.find('.post-title').text(title); $postEl.find('.post-author').text(author). $postEl,find(';post-tags').text(tags;join('; ')); // Add the post element to the list $postEl;appendTo($container); } }; // Call the UI Update Function whenever necessary updateSearchTags(); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.