JavaScript Tutorial

Javascript Check if Cookies are Enabled Javascript Get Element Height Javascript Change Button Color Javascript Refresh Page Every 5 Seconds Allow only Numbers in Textbox Javascript Javascript Get Client Ip Address Javascript Clear form After Submit Javascript Change Title and Meta DescriptionTags Javascript foreach Object Draggable and Resizable Div Javascript Javascript Capitalize First Letter of Each Word Input Type Date Disable Future Date Javascript Check if date is in the Past Javascript Add Class onClick Javascript Date Yesterday Javascript Check if a Date is contained in an Array - React Js | Vue Js Javascript Random Date Between Two Dates Javascript Check if Date is Empty Find object by id in array Javascript Javascript Popup Input Get Domain From Email Javascript Javascript Check Email Domain Type Javascript Add Text to Div Add Remove Class to Body - Toggle Class Leap Year Program in Javascript Javascript split array to Chunks Javascript Replace Underscore with Space and Capitalize Js Add Space Before Capital Letter Javascript Get Day from Date Javascript Get Element By ClassName Javascript Wait 5 Seconds Javascript Paste from Clipboard Javascript Convert SGPA to Percentage Javascript Change Dynamic Open Graph Meta Tags Title & Description Javascript Slide Left or Right to Seek Javascript Calculate Sum of the First N Natural Numbers JavaScript: Get the First and Last Elements from an Array Jquery Check Clicked Element is Div or Not Jquery Create UL and LI tags dynamically with JSON data Jquery Toggle Element Visibility Use jQuery to Dynamically Change Page Title and Meta Description jQuery Change Image Src Dynamically JQuery Scroll to Div Id JQuery Get Element Height and Width Jquery Scroll to Top Button Jquery Radio Button Get Checked Value Javascript Date Format Javascript Get Current Year Javascript Get Last Date of Month Javascript Add Space Every 4 Character Javascript Change Font Awesome Icon onclick Javascript Random Future Date Generator Javascript Check if Element is in Array How to Dynamically Add a Font Awesome Icon with Javascript Javascript Check if Date is in Current Month Javascript Handling Multiple Inputs with a single onchange Handler Javascript Get Operating System Javascript Add Values to an Array of Objects Javascript Only One Checkbox Selected at a Time Javascript Remove Property from Object Javascript Add 0 to Single Digit Javascript Sum Array of Objects Javascript Track Time Spent on Page Javascript window.performance.now() How to Detect Browser and Tab Closing in Javascript Javascript Get Last Two Digits of Year

Jquery Create UL and LI tags dynamically with JSON data

To dynamically create UL and LI tags with JSON data using jQuery, you can iterate through the JSON array, creating list items (LI) for each element and appending them to an unordered list (UL). Use jQuery's $.each function to loop through the JSON array, and for each item, create an LI element with $.createElement and set its text content. Finally, append the LI to the UL.

written

reviewed

updated

How can you use jQuery to dynamically generate unordered list (UL) and list item (LI) tags based on JSON data?

The provided jQuery script dynamically generates an unordered list (UL) containing list item (LI) elements based on JSON data. The script defines a sample JSON structure with categories and items. It iterates through each category, creating a bolded category name within a UL element. For each category, it then appends LI elements for its items. Finally, it appends the constructed UL elements to the 'dynamic-list' div in the HTML document. This script efficiently transforms JSON data into a structured list, providing a dynamic way to display and organize information on a webpage. Ensure the jQuery library is properly linked for the script to execute.

Use jQuery to dynamically generate UL and LI tags from JSON data

<body>

    <div id="dynamic-list"></div>

    <script>
        $(document).ready(function () {
            // Sample JSON data
            var jsonData = {
                "categories": [
                    {
                        "name": "Snacks",
                        "items": ["Chips", "Popcorn", "Nuts"]
                    },
                    {
                        "name": "Beverages",
                        "items": ["Water", "Soda", "Tea"]
                    }
                    // Add more categories and items as needed
                ]
            };

            // Get the reference to the container div
            var dynamicList = $('#dynamic-list');

            // Create an object to store the category elements
            var categoryElements = {};

            // Iterate over each category in the JSON data
            $.each(jsonData.categories, function (index, category) {
                // Check if a <ul> element for the category already exists
                if (!categoryElements[category.name]) {
                    // If not, create a new <ul> element with the category name bold
                    categoryElements[category.name] = $('<ul>').append($('<li>').html('<b>' + category.name + '</b>'));
                }

                // Iterate over each item in the category and append <li> elements
                $.each(category.items, function (index, item) {
                    categoryElements[category.name].append($('<li>').text(item));
                });
            });

            // Append all category <ul> elements to the container div
            $.each(categoryElements, function (categoryName, categoryUl) {
                dynamicList.append(categoryUl);
            });
        });
    </script>

</body>

Run

Output of Jquery Create UL And LI Tags Dynamically With JSON Data

Pasted Image

JavaScript Tutorial

Jquery Create UL and LI tags dynamically with JSON data

Feedback for Abhishek

How can you use jQuery to dynamically generate unordered list (UL) and list item (LI) tags based on JSON data?

Use jQuery to dynamically generate UL and LI tags from JSON data

Output of Jquery Create UL And LI Tags Dynamically With JSON Data