Populating DIVs in li control using javascript

Question

User378463056 posted

Hi Folk,

I have a <ul> control and I want to embed couple divs in this ul and use the Ids of these DIVs to populate them. For instance; here is the hmtl

 <div>
        <h2>All Products</h2>
        <ul id="products">
            <li>
                <div id="customer"></div>
                <div id="custId"></div>
            </li>
        </ul>
    </div>

What I want to do is using javascript/jquery to populate records in the divs inside the li. Here is the javascript script. It can only populate the ul and li. I need help to modify the javascript and use the div ids to populate individually. Here is javascript

    <script>
        var uri = 'api/Values';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
          });
    });
    function formatItem(item) {
        var customer = item.CustomerName;
        var custId = item.CustomerId;
        return;
    }
    </script>

Answer 1

User61956409 posted

Hi pafeth,

You could refer to the following code to find <div> from <li> using jQuery id selector.

$("#customer")

$("#custId")

Then you could populate the divs using following code.

$("#custId").text("the text");
            
//or $("#custId").html("the text");

Best Regards,

Fei Han

Answer 2

User378463056 posted

Hi Fei,

I am not much into javascript but looking at your example I changed the code. It is still wrong. Can you help modify this for me in the right location if you could? Here is the code

var uri = 'api/chatgroups';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('custId').text(item.groupname);
                $('customer').text(item.phone);
                //$('<li>', { text: formatItem(item) }).appendTo($('#products')

                //    );
            });
          });
    });

Answer 3

User61956409 posted

Hi pafeth,

It seems that products list will be returned, would you like to dynamically create a html list to display returned data? If that is the case, you could refer to the following code.

var uri = 'api/chatgroups';

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(uri)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            var itemlist = "";
            $.each(data, function (key, item) {
                // Add a list item for the product.
                var item = "<li><div class='customer'>" + item.phone + "</div><div class='custId'>" + item.groupname + "</div></li>";
                itemlist += item;
            });

            $("#products").append(itemlist);
        });
});

Best Regards,

Fei Han

Answer 4

User475983607 posted

This is a duplicate post!

http://forums.asp.net/t/2080702.aspx?Javascript+problem

Answer 5

User378463056 posted

Your code works but it create new li divs instead of the predefined ones. I want to the predefined DIVs in the UL. Can u change the

 var item = "<li><div class='customer'>" + item.phone + "</div><div class='custId'>" + item.groupname + "</div></li>";
                itemlist += item;

to populate these predefined control by id?

 <ul id="products">
                <li>
                    <div id="groupname"></div>
                    <div id="phone"></div>
                    <div id="photo"></div>
                </li>
           </ul>

Answer 6

User378463056 posted

OK guys,

I tried to change the script like this.

var uri = 'api/bloggers';

    $(document).ready(function () {
        // Send an AJAX request
        $.getJSON(uri)
            .done(function (data) {
                // On success, 'data' contains a list of products.
                var itemlist = "";
                $.each(data, function (key, item) {
                    // Add a list item for the product.
                    var item = $("#displayname").html(item.blogname) +
                               $("#phone").html(item.Phone) +
                               $("#photo").html(item.photo);
                                
                    itemlist += item;
                });

                $("#products").append(itemlist);
            });
    
                //Helpers
            function createData(blogname, photo, phone) {
                
                    var item = new Object();
                    item.phone = Phone;
                    item.BlogName = blogname;
                    item.photo = photo;
                
                    return item;});

These are the div tag I want to populate inside a li

<ul id="products">
                <li>
                    <div id="displayname"></div>
                    <div id="phone"></div>
                    <div id="photo"></div>
                </li>
 </ul>

If you are a javascript guru you should know the output based on the script above. It gives me an output of

[object Object][object Object][object Object][object Object][object Object][object Object]

Please help if you know how to do that. I am not a JavaScript guy.

thanks in advance

Answer 7

User378463056 posted

OK guys, I got it. This is my answer

 $('ul').append('<li><div>' + blogname + '</div><div>' + phone + '</div><div>' + photo + '</div></li>');