CODEWITHSUNDEEP
javascriptjqueryhtml
hollycrab
hollycrab

Reputation: 325

Convert list of HTML element into Javascript list of object

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?

Upvotes: 2

Views: 1085

Answers (4)

Michael Gaskill
Michael Gaskill

Reputation: 8042

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>

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115282

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>

Upvotes: 3

Tyler Untisz
Tyler Untisz

Reputation: 156

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" }]

Upvotes: 1

0xdw
0xdw

Reputation: 3842

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>

Upvotes: 1

Related Questions