Generating a Bulleted List dynamically using jQuery

Recently I had to take a list of items from a service and display it in a Bulleted List dynamically created. The requirement was to use plain HTML and jQuery. Here’s how to do so:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Display Progress</title>
    <script src="Scripts/jquery-1.3.2.js"
    type="text/javascript"></script>
       
    <script type="text/javascript">
        $(document).ready(function() {
        var geoList = [
             { Country: "India", State: "Delhi" },
             { Country: "US", State: "Alabama" },
             { Country: "US", State: "Georgia" },
             { Country: "US", State: "Texas" },
             { Country: "US", State: "NewYork" }
             ];
            $('#LoadPage').append("<ul id='cList'></ul>");
            for (i = 0; i < geoList.length; i++) {
                $("#cList").append("<li>" +
                geoList[i].Country + "-" +
                geoList[i].State + "</li>");
            }
        });
    </script>
</head>
<body>
    <form id="form1">
    <div>   
        <div id="LoadPage">
        </div>  
    </div>
    </form>
</body>
</html>



OUTPUT



image

3 comments:

  1. SwedishChefJuly 23, 2009 at 4:15 AM

    Nice. Simple and fast.

    One thing you might want to consider, should you have a very large data set, is to concat the straing with li's and output that string instead of using append.

    i.e.
    var output = '';

    and for each iteration in the loop,

    output += " [LI] " + geoList[i].Country + "-" geoList[i].State + "[/ LI ]";

    and then do something like $("#LoadPage").html('[UL]'+output+'[/ UL]');

    replace brackets with greater/less than

    ReplyDelete
  2. Peter EysermansAugust 12, 2009 at 11:38 PM

    Nice example. You could use jquery to iterate through the collection instead of using a classic for. Like this:

    $.each(geoList, function(index, geoItem)
    {
    $("#cList").append("[li]" + geoItem.Country + "-" + geoItem.State + "[/li]");
    });

    I find the code easier to read using $.each.

    SwedishChef also points out a nice optimization by first creating a string of all your items and appending it all at once to the page.

    ReplyDelete
  3. Suprotim AgarwalAugust 14, 2009 at 5:06 AM

    SwedishChef, Peter Eysermans : Those tips were neat! Thanks for sharing.

    ReplyDelete