How to create a function that will render items of a global variable into a pre-existing list in Jquery

Question

I am trying to make a function that will render the toDo items as list items in the unorderedList

Create a function renderList that renders the todo items from toDos as list items in the unordered list, make sure that the function is dynamic and that it gets invoked at when while loading the page

How do yo do this in Jquery?

const body = $("body");
const header =$("<header>Todo List</header>")
const unorderedList = $("<ul>unorderedlist</ul>")
var toDos = ["wake up","eat breakfast","code"];

/*const renderList function()=>{
       
{
*/
body.append(header)
body.append(unorderedList)
body.append(toDos);

Phil · Accepted Answer · 2021-08-06T03:41:20.097

1

You can map your array to a list of elements and append them to the list

const toDos = ["wake up", "eat breakfast", "code"];

$("<ul>") // create a <ul>
  .append(toDos.map(text => $("<li>", { text }))) // create <li> elements and append them
  .appendTo(document.body) // append the <ul> to <body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

To explain this part...

$("<li>", { text })

// or more verbosely
$("<li>", { text: text })

// or even more verbosely
$("<li>").text(text)

See https://api.jquery.com/jquery/#jQuery-html-attributes. It's creating a new <li> element and setting the text property to the current value in the toDos array.

For completeness, here's the you might not need jQuery version

const createElement = (tag, props = {}) =>
  Object.assign(document.createElement(tag), props)

const toDos = ["wake up", "eat breakfast", "code"];

const ul = createElement("ul")
ul.append(...toDos.map(textContent => createElement("li", { textContent })))

document.body.append(ul)

edited Aug 06 '21 at 03:41

answered Aug 06 '21 at 02:58

Phil

157,677
23
242
245

first of all thank you very much for the answer! May I ask you: How does it know when you write $("
– Adam.M Aug 06 '21 at 03:25
When you use a full tag string (ie `"
– Phil Aug 06 '21 at 03:27
1

Also how do you read this part (text => $("
", { text }) ? sorry I am just trying to understand and I dont like to copy paste ^_^

Adam.M

Aug 06 '21 at 03:27

@Adam.M I've updated my answer with an explanation of that part – Phil Aug 06 '21 at 03:31

Thank you Phil, you are amazing, I am loving Jquery by the minute, just hate that its very shortened to the point where its kinda hard to understand whats going on when you see the code for the first time And not to mention iam use to curly brackets which tells me hey, we started here we end here. in jquery i dont see how i can know start and end unless i just start using space between code – Adam.M Aug 06 '21 at 03:35

@Adam.M I think you might be referring to jQuery's method chaining. Have a read of this post ~ [how does jquery chaining work?](https://stackoverflow.com/questions/7475336/how-does-jquery-chaining-work) – Phil Aug 06 '21 at 03:37

@Adam.M also, with modern browsers there's a very good chance [you might not need jQuery](http://youmightnotneedjquery.com/). I've added a vanilla JS version for comparison – Phil Aug 06 '21 at 03:42

Raeesh Alam · Answer 2 · 2021-08-06T04:22:08.163

0

Not need jQuery.
Create elements and append them to the list with help of map() method.

const header = document.createElement("header");
const txt = document.createTextNode("Todo List");
header.appendChild(txt);
document.body.appendChild(header);

const toDos = ["wake up", "eat breakfast", "code"];
const ul_List = document.createElement("ul");
toDos.map(function(val){
    const li_List = document.createElement("li");
    li_List.innerHTML = val;
    ul_List.appendChild(li_List)
});
document.body.appendChild(ul_List);

edited Aug 06 '21 at 04:22

answered Aug 06 '21 at 04:16

Raeesh Alam

3,380
1
10
9

Thank you for your answer, my homework is strict on using jquery as practice :) I took dom last week, i fully understand how its done with your answer via dom – Adam.M Aug 06 '21 at 04:55
1

@Adam.M :) So you can preferer https://www.w3schools.com/jquery/jquery_dom_add.asp url for better understand of jQuery DOM. – Raeesh Alam Aug 06 '21 at 05:05
You're misusing `map()` since you are not returning anything or using the result. `forEach()` would be a better fit – Phil Aug 07 '21 at 02:13

How to create a function that will render items of a global variable into a pre-existing list in Jquery

2 Answers2