Binding two array elements into one

Question

I have a issue which is hurting my head cant think how to do it. I have the following feed.

[{
    "title": "thumb_36cr8350.jpg",
    "url": "http://example.com/s3images/thumb_36cr8350.jpg",
}, {
    "title": "large_36cr8352.jpg",
    "url": "http://example.com/s3images/large_36cr8350.jpg",

}, {
    "title": "thumb_36cr8358.jpg",
    "url": "http://example.com/s3images/thumb_36cr8358.jpg",
}, {
    "title": "large_36cr8360_a.jpg",
    "url": "http://example.com/s3images/large_36cr8358.jpg",

}]

which i am looping through

var thumb = "<ul id='thumbs'>";
$.each(response, function (i, item) {
    var params = baseName(item.title).split("_");
    if (params[0] === 'thumb') {
        thumb += '<li><a class="group1" href="{this need to be the large thumb}"><img src="' + item.url + '" width="75" height="75"/></a></li>';
    }
});
thumb += "</ul>";
$('.conatiner').html('<div id="wrap">' + thumb + '</div>');

function baseName(str) {
    var base = new String(str).substring(str.lastIndexOf('/') + 1);
    if (base.lastIndexOf(".") != -1)
        base = base.substring(0, base.lastIndexOf("."));
    return base;
}

I need to somehow push the large pic into the href of the list for the Lightbox effect.

Cannot for the life of me think how to do this.

Any help please

nicosantangelo · Accepted Answer · 2013-07-08 13:44:20Z

1

Tell me if this is what you're looking for:

var thumb = "<ul id='thumbs'>";
$.each(response, function (i, item) {
    var params = baseName(item.title).split("_");
    if (params[0] === 'thumb') {
        thumb += '<li><a class="group1" href="#{url}"><img src="' + item.url + '" width="75" height="75"/></a></li>';
    } else {
        thumb = thumb.replace("#{url}", item.url);
    }
});
thumb += "</ul>";
$('.conatiner').html('<div id="wrap">' + thumb + '</div>');

function baseName(str) {
    var base = new String(str).substring(str.lastIndexOf('/') + 1);
    if (base.lastIndexOf(".") != -1)
        base = base.substring(0, base.lastIndexOf("."));
    return base;
}

answered Jul 8, 2013 at 13:44

nicosantangelo

13.8k3 gold badges35 silver badges47 bronze badges

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

6 Comments

Olegas Over a year ago

It depends on order in which items are passed in response... Just a note.

nicosantangelo Over a year ago

Yes, I did it with the array the OP provided in mind (to keep it simple)

user1503606 Over a year ago

the output i am getting from console.log(thumb); is 12 <ul id='thumbs'>

nicosantangelo Over a year ago

Uhm, that's weird, it's working for me with the response you provided, look: jsfiddle.net/VZGts/1

nicosantangelo Over a year ago

I guess it could be the response, try console.log(response), and see what you get :)

|

Collectives™ on Stack Overflow

Binding two array elements into one

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related