jQuery Array and Foreach

Question

Here's my array and i need to do a foreach to display the image and such for each one. Basically the array contains slides and slide information, i need to output a div for each one with the information in (which i can do if i knew how to access it).

var slides = new Array();
slides[1] = {slidetitle: 'title 1',
             slidetext: 'text 1',
             image1: '',
             magnifyposit: '',
             buttontext: 'button text 1',
             buttonurl: 'http://www.google.com'};
slides[2] = {slidetitle: 'title 2',
             slidetext: 'text 2',
             image1: '',
             magnifyposit: '',
             buttontext: 'button text 2',
             buttonurl: 'http://www.google.com'};
slides[3] = {slidetitle: 'title 3',
             slidetext: 'text 3',
             image1: '',
             magnifyposit: '',
             buttontext: 'button text 3',
             buttonurl: ''};
slides[4] = {slidetitle: 'title 4',
             slidetext: 'text 4',
             image1: '',
             magnifyposit: '',
             buttontext: 'button text 4',
             buttonurl: 'http://www.google.com'};
slides[5] = {slidetitle: 'title 5',
             slidetext: 'text 5',
             image1: '',
             magnifyposit: '',
             buttontext: 'button text 5',
             buttonurl: 'http://www.google.com'};

Prasenjit Kumar Nag · Accepted Answer · 2012-05-31 12:58:25Z

6

You can use $.each like this

$.each(slides,function(i,obj){
   //here  obj is object element of slides array

  // access properties of the object 
  // in current iteration like obj.slidetitle,obj.slidetext etc

});

Note: You should start array index at 0.

Working Fiddle

edited May 31, 2012 at 12:58

answered May 31, 2012 at 12:43

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

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

Comments

lucuma · Accepted Answer · 2012-05-31 12:44:23Z

A couple things to note. You'll want to start your array at index 0. Here is the full code and jsfiddle: http://jsfiddle.net/lucuma/gKgns/

var slides = new Array();

slides[0] = {slidetitle: 'title 1',
                         slidetext: 'text 1',
                         image1: '',
                         magnifyposit: '',
                         buttontext: 'button text 1',
                         buttonurl: 'http://www.google.com'};

slides[1] = {slidetitle: 'title 1',
                         slidetext: 'text 1',
                         image1: '',
                         magnifyposit: '',
                         buttontext: 'button text 1',
                         buttonurl: 'http://www.google.com'};

slides[2] = {slidetitle: 'title 2',
                         slidetext: 'text 2',
                         image1: '',
                         magnifyposit: '',
                         buttontext: 'button text 2',
                         buttonurl: 'http://www.google.com'};

slides[3] = {slidetitle: 'title 3',
                         slidetext: 'text 3',
                         image1: '',
                         magnifyposit: '',
                         buttontext: 'button text 3',
                         buttonurl: ''};

slides[4] = {slidetitle: 'title 4',
                         slidetext: 'text 4',
                         image1: '',
                         magnifyposit: '',
                         buttontext: 'button text 4',
                         buttonurl: 'http://www.google.com'};

 slides[5] = {slidetitle: 'title 5',
                         slidetext: 'text 5',
                         image1: '',
                         magnifyposit: '',
                         buttontext: 'button text 5',
                         buttonurl: 'http://www.google.com'};      

var $container= $('#container');
$.each(slides, function(index, value) { 
   var $div = $('<div>' + value.slidetitle + '</div>');
   $container.append($div);
});

Tolio · Accepted Answer · 2012-05-31 12:45:22Z

1

Basically you must create a table with an empty tbody, tbody must have an id set up in order to select it later.

$.each(slides, function (index, value) {
    var row = '<tr><td>value.title</td></tr>'
    + '<tr><td>value.text</td></tr>';

    $('#tableBody').append(row);
}

Where value is your Array object.

answered May 31, 2012 at 12:45

Tolio

1,04313 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery Array and Foreach

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related