Home/ Questions/Q 7418689
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T07:55:52+00:00

What is the suggested way to solve this issue? I have a HTML list

  • 0

What is the suggested way to solve this issue?

I have a HTML list like so:

<ul>
  <li><img src="img1.jpg" alt="Image One" /></li>
  <li><img src="img2.jpg" alt="Image Two" /></li>
  <li><img src="img3.jpg" alt="Image Three" /></li>
</ul>

and I’d like to convert this data to an object, something like:

{
    images: {
        1: {
            src: "img1.jpg",
            alt: "Image One"
        },
        2: {
            src: "img2.jpg",
            title: "Image Two"
        },
        3: {
            src: "img3.jpg",
            title: "Image Three"
        }
    }
}

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s one way to do it.

    I explained how it works in the comments.

    Please tell me if there’s anything wrong with the code.

    <!DOCTYPE html>
<html>
    <head>
        <title></title>

        <style>
            </style>

    </head>
    <body>


        <ul id="ul">
            <li><img src="img1.jpg" alt="Image One" /></li>
            <li><img src="img2.jpg" alt="Image Two" /></li>
            <li><img src="img3.jpg" alt="Image Three" /></li>
        </ul>


        <script>

            //Get the element that contains the image nodes
            var ul = document.getElementById("ul");

            //create a new 'images' object
            var images = {};


            //Note: this function call returns the image nodes in the order
            //they appear in the ul element. If an li node has 2 images, or no 
            //images, this method of retrieval may not suit your liking.
            var imgNodes = ul.getElementsByTagName("img");


            //Loop through all the image nodes
            for(var i = 0, l = imgNodes.length; i < l; i++) {

                //Add a new object to the images object
                images[i+1+""] = {

                    //getAttribute is a safe way to retrieve the attributes of a node
                    src :   imgNodes[i].getAttribute("src"),
                    alt :   imgNodes[i].getAttribute("alt")

                };

            }

            //Spit it out in the console to make sure it's good.
            console.log(images);


        </script>

    </body>
</html>
    • 0