Convert list of HTML element into Javascript list of object

Question

I'm trying to convert something like this HTML snippet:

<ul>
  <li><span>Frank</span><img src="pic.jpg"></li>
  <li><span>Steve</span><img src="pic2.jpg"></li>
</ul>

into a JavaScript objects that contain the name and the image's url. How can I do that?

Answer 1

Use map() method

 var res = $('ul li').map(function() { // select all li and iterate // return as required format of array elemnt return { name: $('span', this).text(), // get text in span src: $('img', this).attr('src') // get src attribute } }).get(); // get array from jquery object console.log(res); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><span>Frank</span> <img src="pic.jpg"> </li> <li><span>Steve</span> <img src="pic2.jpg"> </li> </ul> 

---

UPDATE : If you want to generate an object which has key as span text and value as src attribute then use each() method and iterate over elements and generate object.

 var res = {}; $('ul li').each(function() { // select all li and iterate res[$('span', this).text().trim()] = $('img', this).attr('src'); }) console.log(res); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><span>Frank</span> <img src="pic.jpg"> </li> <li><span>Steve</span> <img src="pic2.jpg"> </li> </ul> 

Answer 2

 var objs = document.querySelectorAll('.to-js-obj li'); var objs_arr = []; if (objs) { for (var i = 0; i < objs.length; i++) { var name = objs[i].querySelector('span').innerText; var url = objs[i].querySelector('img').src; objs_arr.push({ name: name, src: url }); } console.log(JSON.stringify(objs_arr)); } 

 <ul class="to-js-obj"> <li><span>Frank</span> <img src="pic.jpg"> </li> <li><span>Steve</span> <img src="pic2.jpg"> </li> </ul> 

Answer 3

Using jQuery

var $list = $('ul'), // get the list (ideally, add an ID)
$listItems = $list.find('li'); // find list items

if( $listItems.length > 0 ) { // if list items exist
  var images = []; // create empty array to store objects
  $.each( $listItems, function( index ) { // loop through the list items

        var $item = $( $listItems[index] ); // save item as jQuery element
        var name = $item.find('span').text(); // Get name from span
        var imageSrc = $item.find('img').attr('src'); // Get img src
        images[index] = {}; // Create new object in array
        images[index].name = name; // Add name
        images[index].imageSrc = imageSrc; // Add source
    });

}

Returns

[Object { imageSrc: "pic.jpg", name: "Frank" }, Object { imageSrc: "pic2.jpg", name: "Steve" }]

Answer 4

You can use this:

 var image_pairs = []; $("ul li").each(function() { image_pairs.push({ name: $(this).find("span").text(), url: $(this).find("img").attr("src") }); }); console.log(image_pairs); 

 <ul> <li><span>Frank</span><img src="pic.jpg"></li> <li><span>Steve</span><img src="pic2.jpg"></li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>