Trying to use different array data structure in a jQuery script

Question

I came across this random image rotator

var theImages = new Array() 
    theImages[0] = 'img1"'  theImages[1] = 'img2"'......   
var shuffled = [];    
while (theImages.length) {
    shuffled.push(theImages.splice(Math.random() * theImages.length, 1));
}            
$(document).ready(function(){        
    //Runs Script each time there is an <li>
    $("#news li").each(function(index){                
        //Puts Image in front of everything in <li>
        $(this).prepend('<img src="'+shuffled[index]+'">');            
    });

});

And I integrated it into a jQuery Carousel. You can see (my fiddle) here. The problem is that the array structure I want to use for the Carousel is different from the rotator's. The rotator uses:

var theImages = new Array() 
theImages[0] = 'img1"'
theImages[1] = 'img2"'
theImages[2] = 'img3"'

But I want to use the following for the Carousel because I want to input a link to each picture as well.

var theImages = [
['img1','url_1'],
['img2','url_2'],
['img3','url_3']];

The outcome I'm looking for would be like:

<div id="carousel1"> 
<div class="1"><a href="url_1"><img src="img1"></a></div>
<div class="1"><a href="url_2"><img src="img2"></a></div>......

From what I've read, I have to use for in loop to assign the data and can't simply use what the image rotator is using:

$("#carousel1 .1").each(function(index){    

$(this).prepend('<a href="'+imgPath+''+shuffled[index]+'"><img 
src="'+urlPath+''+shuffled[?url](?url)+'"></a>');

Is that true? Is there any way that allows me to populate the images as well as the urls in the Carousel?

Felix Kling · Accepted Answer · 2014-02-23 19:21:27Z

2

No, never use for ... in for arrays. All you have to do is change

'<img src="'+shuffled[index]+'">'

to

'<a href="'+imgPath+shuffled[index][1]+'"><img src="'+urlPath+shuffled[index][0]+'"></a>'

since the image path is the first element of the inner array, and the link is the second one.

See Access / process (nested) objects, arrays or JSON for more info.

(I assume imgPath and urlPath are actually defined somewhere and contain URLs. If not, you should remove them.)

edited Feb 23, 2014 at 19:21

answered Feb 23, 2014 at 19:07

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

RedGiant Over a year ago

Yes, the imgPath and urlPath are defined. var imgPath = "/pic/"; var urlPath = "/url/";. I made the change you suggest, but I got an undefined error. Am I doing it wrong? fiddle

Felix Kling Over a year ago

I don't get any error, but the code to shuffle the array is actually wrong. .splice returns an array of the removed elements, so you have to add [0] to get the first (and only) removed element: shuffled.push(theImages.splice(Math.random() * theImages.length, 1)[0]); It only seemed to have been correct before, but shuffled was actually an array of arrays with single elements. jsfiddle.net/YrPc7/14

Tim B · Accepted Answer · 2014-02-23 19:10:31Z

1

Your problem is that your source array (the shuffled values) only contains one value but the final resulting one you want to have pairs of values. That extra data needs to come from somewhere, the computer can't just invent it.

The easiest way to do this is to modify the shuffle code and instead of shuffling single strings shuffle pairs of strings instead.

i.e. something like

var theImages = new Array() 
theImages[0] = ['img1"', data1]
theImages[1] = ['img2"', data2]

answered Feb 23, 2014 at 19:10

Tim B

41.3k16 gold badges87 silver badges132 bronze badges

2 Comments

Felix Kling Over a year ago

Isn't that what the OP is already doing in var theImages = [ ['img1','url_1'], ['img2','url_2'], ['img3','url_3']]; ?

Tim B Over a year ago

@FelixKling I don't think so, I could be wrong but if I'm reading the question right that's how he does it without the shuffling.

EdL · Accepted Answer · 2014-02-23 19:16:29Z

0

for(var i=0;i<theImages.length;i++){
    newTheImagesArray.push([theImages[i],theImages[i]])
}

This should work for what you want

answered Feb 23, 2014 at 19:16

EdL

4334 silver badges13 bronze badges

2 Comments

Felix Kling Over a year ago

That generates the link and image how exactly?

EdL Over a year ago

I understood that the link attached to the image was to be to the image, This takes the array of images in the form `["url1","url2","url3"...]' and puts it into the form ["url1":"url1","url2":"url2","url3":"url3"...]

Collectives™ on Stack Overflow

Trying to use different array data structure in a jQuery script

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related