Access data from an array with jquery

Question

Im trying to loop through an array only i cant seem to extract the data from my array...

var listTicker = function (options) {

     var defaults = {
         list: [],
         startIndex: 0,
         interval: 3 * 1000,
     }
     var options = $.extend(defaults, options);

     var listTickerInner = function (index) {

         if (options.list.length == 0) return;

         if (!index || index < 0 || index > options.list.length) index = 0;

         var value = options.list[index];

         options.trickerPanel.fadeOut(function () {
             $(this).html(value).fadeIn();
         });

         var nextIndex = (index + 1) % options.list.length;

         setTimeout(function () {
             listTickerInner(nextIndex);
         }, options.interval);

     };

     listTickerInner(options.startIndex);
 }

 var textlist = new Array({
     id: 0,
     name: 'Antonia Lallement',
     title: '\u003cp\u003e\u003cspan\u003eConsultant\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI started as a resourcer at company three months ago so I\u0026rsquo;m a new team member. Sin...',
     image: 'antonia.jpg'
 }, {
     id: 1,
     name: 'Camilla Gobel',
     title: '\u003cp\u003e\u003cspan\u003eBusiness Manager\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI joined company in 2011. As a multilingual Consultant, my initial focus was the provisi...',
     image: 'camilla.jpg'
 }, {
     id: 2,
     name: 'Mark Dorey',
     title: '\u003cp\u003e\u003cspan\u003eDiscipline Manager (Process, Subsea, Project, Safety)\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eWhen I joined company I started as a resourcing specialist and worked across Search and ...',
     image: 'mark.jpg'
 }, {
     id: 3,
     name: 'Sadia Butt',
     title: '\u003cp\u003e\u003cspan\u003eDiscipline Manager (Mechanical, Piping, Structural)\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI couldn\u0026rsquo;t have asked for a better company to work for! After working as a resourc...',
     image: 'sadia.jpg'
 }, {
     id: 4,
     name: 'Samantha Linnert',
     title: '\u003cp\u003e\u003cspan\u003ePayroll Assistant\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI began at company as an operations assistant learning to spec CVs and post jobs. Shortl...',
     image: 'samantha.jpg'
 }, {
     id: 5,
     name: 'Simon Cottenham',
     title: '\u003cp\u003e\u003cspan\u003eConsultant, Middle East\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI have been with company for exactly one year now, I never would have believed that I wo...',
     image: 'simon.jpg'
 }, {
     id: 6,
     name: 'Vicky Spencer',
     title: '\u003cp\u003e\u003cspan\u003ePayroll Manager\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI started my career at company in July 2012 initially covering maternity leave, managing...',
     image: 'vicky.jpg'
 });

 $(function () {
     listTicker({
         list: textlist,
         startIndex: 0,
         trickerPanel: $('.textbox'),
         interval: 3 * 1000,
     });
 });

Also, consider using Array literal syntax [elem1, elem2...] instead of the constructor syntax new Array(elem1, elem2...). It's easier to read and means the exact same thing. — beatgammit
– beatgammit, Commented Oct 24, 2013 at 10:10

bipen · Accepted Answer · 2013-10-24 09:55:24Z

1

you are adding object to a html .... use . operator to get the actual values

....
  options.trickerPanel.fadeOut(function () {
    $(this).html(value.id).fadeIn();
            //--------^^^----here
 }

i am taking id from the object and showing it in the div.. you can add whatever you need there..

$(this).html(value.title).fadeIn(); //to get title

fiddle here

answered Oct 24, 2013 at 9:55

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

Comments

Nzall · Accepted Answer · 2013-10-24 09:55:36Z

1

$.each(textlist, function(index, value){
//do stuff with your array
});

answered Oct 24, 2013 at 9:55

Nzall

3,5855 gold badges36 silver badges65 bronze badges

Comments

Sriram · Accepted Answer · 2013-10-24 10:02:59Z

0

Pasting just the diff, i tried to get the data here below.

From the code above.

options.trickerPanel.fadeOut(function () {
         $(this).html(value).fadeIn();
});

The diff,

options.trickerPanel.fadeOut(function () {
     $(this).html(value.bio).fadeIn();
});

The difference, is value is the entire array object being passed to the fadeOut function, accessing each elements in the array gives the result.

answered Oct 24, 2013 at 10:02

Sriram

264 bronze badges

Collectives™ on Stack Overflow

Access data from an array with jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related