Now, if we move on to the next example,
here our goal is to display some dummy user data.
Some dummy user data,
which we actually will create in our JavaScript code.
In reality, that could of course be data
which we fetched from some database or anything like this,
but we don't have all the knowledge we need for this yet.
So at the moment, we'll just work with dummy data.
We will of course, also dive into databases later
in the course though.
So here in this loops, in action JavaScript file,
I'll work on that display user data task
here on this example and I'll start by defining
some dummy data here.
So some dummy user data, actually,
and that's just a JavaScript object like this,
and then this object, I'll just add a first name,
which in my case is Max and a last name,
which in my case is Schwarzmueller
and the age, which is 32.
And of course you can add more dummy data here
if you want to.
But now the goal is to, again,
listen to a click on this button here
and then reach out to this unordered list
and add new list items in there
that represent this dummy data.
And for this here in my JavaScript file, I'll first of all,
get access to that button
and I'll name it, display user data button element
again, a very long, but also descriptive name.
And I will select this button as I did it before
in the other tasks with query selector,
and then by diving into some element with some ID
and selecting the first button there.
And the ID off this section here now is user data.
So I'll use this ID here to select my button like this.
Then with that done, we can add a function as before,
and that's the display user data function.
I guess that name makes sense and ask before we connect
our button by adding an event listener
and just as before that's the click event
where I then want to point at the display user data function
that should be executed.
And now in that function here,
the goal is to get access to this unordered list
and to then add list items to it.
One list item for every property I have in this object
and that streams for a for in loop.
Whenever you have some task that needs to do something
for every property in an object,
that's a prime example for in loop.
But first of all,
I'll get access to the output element
or output data element, whatever you want to name it.
And here we can use document get element by ID
because it turns out that in this HTML file,
this unordered list has an ID.
And of course we can then just use this
ID here to get access to this element in JavaScript.
And then here we create a for in loop
with the for key word again.
But now here we trade a helper constant
just as in the for off loop.
And we can give this constant any name of our choice,
but it will hold the property names as values.
So common choices here,
are property name or key or anything like that.
And I'll go with key here.
And then we use the in keyword and then we point at the
object through which we want to loop.
So in my case, dummy user data here.
And then here inside of that code, inside of that loop code,
we now got access to this key and with help of that key,
as we learned,
we can also get access to the individual values
off those properties in this object.
Now I will start, however,
by creating a new user data list item here,
or list item element to be inline with the other
constant and variable names I chose,
even though that's maybe a bit too long,
and then I'll simply create this element here
with create element and to create element
we pass the element name, which in this case is L I,
since I want to create a list item.
Now, as a next step,
I then want to use my new user data list item element,
and set the text content equal to a string,
which will now actually be made up of multiple blocks
and therefore I'll stored that string in a separate constant
to keep this line of code a short
and concise and not do it all in one line,
which would be possible, but a bit harder to read.
And hence here I'll add a new constant output text
and dad will be a string where I start with my key.
So the name of the property,
which I want to transform to be all uppercase,
and since key holds a string value,
we can do this with the dot notation and then
to upper case, which is a method we can execute
on any string to convert all the characters in there
to uppercase characters.
Then I'll use the plus operator here on a string
to concatenated with another string.
And that should be a string where I add a colon
after this upper case key name and then a white space.
And then I concatenate yet another string,
which should be the value for this property.
And we learned that we get access to that value by using the
object dominant user data.
And then this square bracket notation,
where we then provide our property name,
our key in this case.
And that will dynamically access the different values
of the different keys on that object here.
Now with that, I got my output text
and that's now the text content I want to set here.
And we could have done all of that here in this one line,
but then the line would maybe be a bit too long,
a bit harder to read, and that's why I'm going forward
with helper constant, which I then just referred to here.
And now with that done,
we just need to append this list item
to this output data element.
So as a last step,
I use my output data element and call append
to append the new user data list item element.
Now, if we do that, then we generally have
the behavior we want.
If I saved this and I clicked this button,
we now output this user data here.
However, at the moment, if I click the button again,
we add more and more user data.
And of course,
instead I would want to override the existing user data
with the new user data.
One easy way of achieving this would be
to go back into our display user data function.
And before we entered a loop,
whenever dysfunction is executed, though,
I use my output data element constant here,
so this unordered list and I set inner HTML equal
to an empty string,
which clears all the list items that might exist
inside of that unordered list.
So that removes all existing list items
before we then create an add new ones with help of that
for in loop.
And with this change implemented,
now I can hammer this button and I will still only get
the output once because it's technically removed
and re added with every click
and that's this example implemented
with help of a for in loop and for in loops
are always a great choice
if you need to work with all the properties in an object.