I am trying to create a list of links dynamically using the results from a call to a web service. I have the <ul> element in my HTML.

<ul id="myList"></ul>

And I am trying to use jQuery foreach and append to create the list items.

Given the following data:

var options = {
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"}
};

I thought I could create the list using the following script:

$each(options, function(index) {
    $("#myList").append($("<li>", {}).append($("<a>", { href: options[index].href })).text(options[index].text));
});

Although it is kind of working, the text is ending up outside of the anchor elements. What I want to end up with is:

<ul id="myList">
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
</ul>

Can anybody tell me where I am going wrong?

Thanks.

I am trying to create a list of links dynamically using the results from a call to a web service. I have the <ul> element in my HTML.

<ul id="myList"></ul>

And I am trying to use jQuery foreach and append to create the list items.

Given the following data:

var options = {
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"}
};

I thought I could create the list using the following script:

$each(options, function(index) {
    $("#myList").append($("<li>", {}).append($("<a>", { href: options[index].href })).text(options[index].text));
});

Although it is kind of working, the text is ending up outside of the anchor elements. What I want to end up with is:

<ul id="myList">
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
</ul>

Can anybody tell me where I am going wrong?

Thanks.

• javascript
• jquery
• html-lists

• I dont understand....that output looks fine....show us the wrong output ;) – Hackerman Commented Mar 14, 2013 at 17:35
• You have 1 too many closing brackets before .text( – Jamiec Commented Mar 14, 2013 at 17:35
• Robert: the output I provided was the desired, not the result. The result was <li><a href="#"></a>Text</li>; as pointed out by some of the answers, I was setting the text on the <li> instead of the <a>. – Martin Robins Commented Mar 14, 2013 at 17:53
• Jamiec: probably another typo; it seems I made quite a few when typing this question! – Martin Robins Commented Mar 14, 2013 at 17:53

6 Answers 6

You were close, but your syntax is slightly wrong.

var options = [
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"}
];

$.each(options, function(index) {
    $("#myList").append($("<li>", {}).append($("<a>", { href: options[index].href }).text(options[index].text)));
});

You need an array of options which contain your objects. You also had a syntax error on $.each. Example: http://jsfiddle/5ZDZX/1/

I think you might be nesting the appends incorrectly. Try:

$.each(options, function(index) {
    $("#myList").append(
        $("<li>", {}).append(
            $("<a>", { href: options[index].href }).text(
                options[index].text
            )
        )
    );
});

The way you had it, you were adding the text to the <li> and not the <a>.

Try this

$.each(options, function(index) {
    $("#myList").append($("<li>").append($("<a>", { href: options[index].href , text : options[index].text})));
});

http://jsfiddle/uMUzf/

That's because you're setting the .text of the li not the a tag.

Also, your option object is set up incorrectly using { } instead of [ ]

DEMO: http://jsfiddle/4WTG3/

Try this:

var options = [
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"}
];

$.each(options, function(index) {
    $("#myList")
    .append($("<li>", {})
        .append($("<a>", { href: options[index].href }).text(options[index].text)
    ));
});

You need array of objects and your append statement seems a bit overly plicated:

http://jsfiddle/x23ja/

You also needed to use $.each instead of $each

I used this succesfully

$.each(result, function (i, file) {
                $("#filelist").append('<li><a target="_blank" href="' + downloadUrl + '/' + file.StaticFileId + '">' + file.ShortDesc + '</a></li>');
});