javascript list to HTML list

Question

I'm sure this is a simple one, and I'm close, but can't get exactly what I want.

The end result I need to create (in HTML) is like this:

<li id="EventList">
<ul class="calendar-menu">
    <li>
        <time class="anthracite"><b>24</b> Feb</time>
        <small class="green">10:30</small>
        Event's description
    </li>
    <br />
    <li>
        <time class="anthracite"><b>24</b> Feb</time>
        <small class="green">10:30</small>
        Event's description
    </li>
    <br />
    <li>
        <time class="anthracite"><b>24</b> Feb</time>
        <small class="green">10:30</small>
        Event's description
    </li>
</ul>

I need to fill in the date, time and description elements dynamically, based on data that I get from an ajax call to the database.

Here's what I have been trying to get to create the HTML list. Eventually the data will come from

function GetList() {
    $.ajax({
        async: false,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ExampleList.aspx/GetList",
        dataType: "json",
        success: function (data, textStatus) {
            if (textStatus == "success") {
                var datos = jQuery.parseJSON(data.d);

                $("#EventList").html('');
                var list = '<ul>'
                $.each(datos, function (i, v) {

                Something in here to populate the <li> tags? 

                }); 
                list += '</ul>'

                $("#EventList").append(list);
            }
        },
        error: function (request, status, error) {
            alert(jQuery.parseJSON(request.responseText).Message);
        }
    });
}

Is anyone able to point me in the right direction with some example code?

well we can't tell you exactly because we don't know the structure of your datos object but basically you can create some HTML string by joining bits of hard-coded HTML strings to your object's properties. e.g. list += <li><time class="anthracite"><b>' + v.whateverYourHoursFieldIsCalled + '</b>'...etc — ADyson
– ADyson, Commented May 17, 2018 at 15:59
In theory it could work if you wrap that append(thing) in a $, i.e. $("#EventList").append($(list)); — Brian
– Brian, Commented May 17, 2018 at 16:00
@Brian append() can accept a plain old string so wrapping it in a jQuery object first seems like a bit overkill. I don't think that's the issue. — ADyson
– ADyson, Commented May 17, 2018 at 16:01

Roy Bogado · Accepted Answer · 2018-05-17 16:40:54Z

1

Try:

list+= '<li><time class="anthracite"><b>'+v.number+'</b> '+v.month+'</time><small class="green">'+v.time+'</small>'+v.eventName+'</li>';

You can continue writing list to complete the li's with the fetched data.
Hope it helps!

answered May 17, 2018 at 16:40

Roy Bogado

4,4721 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Roberts Over a year ago

Thanks Roy, that was exactly what I needed

Collectives™ on Stack Overflow

javascript list to HTML list

1 Answer 1

Try:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Try:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related