CODEWITHSUNDEEP
javascriptjqueryjson
Solomon Sam
Solomon Sam

Reputation: 268

change image source with JSON data with javascript / jQuery

i trying to change the source of a set of images with JSON data that's been sent over from another page, the JSON data that looks like this:

var jsondata = {
    "images": [
    {"src": "images/bgset.jpg"},
    {"src": "images/ar006.png"},
    {"src": "images/br006.png"},
    {"src": "images/cr006.png"},
    {"src": "images/dr006.png"},
    {"src": "images/er001.png"},
    {"src": "images/tr004.png"},
    {"src": "images/tr011.png"}
]}

And im trying to change the src values of set of images with the class of .imageset. im also tiring to work out a way to leave the first one in the JSON data {"src": "images/bgset.jpg"}. im lost not knowing how to get around this problem. im not even sure on how to get the values out of this data!

Update

thanks for the answers! With the answers i have currently created this:

var jsonStr = location.search.substring(1).split('=');
var obj = JSON.parse(unescape(jsonStr[1]));
var jsondata = JSON.parse(obj.jsondata);
var aa = jsondata.images.length;
var ab = jsondata.images.slice(1, aa); // this part removes the first src
var ac = $(".imageset");
// here is the confusion part i found this will go through the set
for( var i = 0; i < aa; i++ ) {              
}
// and this will go through each class
ac.each( function() {
})

how do i join both this codes can put one image src per class?

Upvotes: 0

Views: 5916

Answers (3)

Solomon Sam
Solomon Sam

Reputation: 268

Ok here is the working answer for it and once again thanks to @EricG and @donnywals answers couldn't have done it without you guys.

var jsonStr = location.search.substring(1).split('=');
var obj = JSON.parse(unescape(jsonStr[1]));
var jsondata = JSON.parse(obj.jsondata);
var aa = jsondata.images.length;
var ab = jsondata.images.slice(1, aa);
var i = 0;
$(".imageset").each(function(i) {
    $(this).attr("src", ab[i++].src);
});

Upvotes: 0

EricG
EricG

Reputation: 3849

In the case you did mean to skip the first image source, get the relevant sources like this:

var relevantSources = jsondata.images.shift(); // All except the first one.

Next you'll want to have the image elements with the class .imageset as follows:

var relevantImageElements = document.getElementsByClassName(".imageset"); // Or jQuery $(".imagesets");

Lastly, just loop through them, assuming the order is already okay.

var ln = Math.min( relevantSources.length, relevantImageElements.length;
for( var i = 0; i < ln; i++ ) {
    relevantImageElements[ i ].src = relevantSources[ i ];
}

Is this useful?

Upvotes: 1

donnywals
donnywals

Reputation: 7591

jQuery has some really good functions to do what you want. Try looking at them here: http://api.jquery.com/jQuery.parseJSON/

that should teach how to 'read' JSON with your code.

now for the image source, also use jQuery. You can use

$(".imageset").attr("src", jsondata[0].src);

for example.

If you want to loop through all images with the imageset class you could just user a for/foreach loop (google it, it's easy)

Upvotes: 3

Related Questions