Create an array of object from ul li using jquery

Question

Im trying to create an array of object from ul li tags using jQuery. Unfortunately I'm not able to do that. I'm pasting my code bellow.

var photos = [];
$( "#sliderContent li" ).each(function() {

  var title = $(this).find(".title").html();
  var image = $(this).find(".image".html());
  var url = $(this).find(".url").html();
  var firstline = $(this).find(".firstline").html();
  var secondline = $(this).find(".secondline").html();

  var slide = new Object();
  slide.title = title;
  slide.image = image;
  slide.url = url;
  slide.firstline = firstline;
  slide.secondline = secondline;
  photos.push(slide);
});

My HTML list ul li

<ul id="sliderContent" >
    <li>
        <div class="title">Stairs 1</div>
        <div class="image">vacation.jpg 1</div>
        <div class="url"># 1</div>
        <div class="firstline">Amazing Apartment for Rent in JBR 1</div>
        <div class="secondline">
            <div class='row'>
                    <div class='col1'>ABD 1</div>
                    <div class='col2'>EFG 1</div>
            </div>
            <div class='row'>
                <div class='col1'>ABD 1</div>
                <div class='col2'>EFG 1</div>
           </div><div class='row'>
            <a class='view' href='#'></a>
            <a class='arrange' href='#'></a>
           </div>
       </div>
    </li>
</ul>

This is what i want to create.

var photos = [ {
    "title" : "Stairs",
    "image" : "vacation.jpg",
    "url" : "",
    "firstline" : "Amazing Apartment for Rent in JBR",
    "secondline" : "lorem ipsum"
}, {
    "title" : "Office Appartments",
    "image" : "work.jpg",
    "url" : "",
    "firstline" : "Amazing Apartment for Rent in JBR",
    "secondline" : "work?"
}];

Please tell me where did go wrong, and also how to view the content of the array photos to check the result.

Any help would be appreciated.

maybe just a typo... but in this line var image = $(this).find(".image".html()); you got the parantheses wrong. — Dennis
– Dennis, Commented Jan 18, 2013 at 7:25
Yea. that helped me to get through it. thanks buddy, you made my day :) — Rahmathullah M
– Rahmathullah M, Commented Jan 18, 2013 at 8:18

Dennis · Accepted Answer · 2013-01-18 07:42:22Z

1

while we're at it, in response to gurvinder372's answer, you could also create the object like this:

var slide = {
    title: title,
    image: image,
    url: url,
    firstline: firstline,
    secondline: secondline
};

instead of you original version:

  var slide = new Object();
  slide.title = title;
  slide.image = image;
  slide.url = url;
  slide.firstline = firstline;
  slide.secondline = secondline;

EDIT: now, that i took some more time... You could in this case use the jQuery.map function like this:

var photos = $('#sliderContent li').map(function(index, liItem) {
    var $liItem = $(liItem);

    return {
        title: $liItem.find('.title').html(),
        image: $liItem.find('.image').html(),
        url: $liItem.find('.url').html(),
        firstline: $liItem.find('.firstline').html(),
        secondline: $liItem.find('.secondline').html()
    };
});

Remember to call this code only when the dom is ready (thus the list sliderContent exists). if you dont know the jQuery.map function, check out its doc: http://api.jquery.com/map/

edited Jan 18, 2013 at 7:42

answered Jan 18, 2013 at 7:32

Dennis

14.5k3 gold badges37 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rick Kuipers Over a year ago

Cool, never knew jQuery had a map function that worked like this.

gurvinder372 · Accepted Answer · 2013-01-18 07:28:42Z

1

You can do alert( JSON.stringify( photos ) ); to see the resulted object

you need to change

var slide = new Object();

to

var slide = {};

also, i am not able to make out how are you deducing 'secondline' from that html

answered Jan 18, 2013 at 7:28

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Create an array of object from ul li using jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related