change image source with JSON data with javascript / jQuery

Question

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?

donnywals · Accepted Answer · 2012-07-12 22:17:32Z

3

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)

answered Jul 12, 2012 at 22:17

donnywals

7,6212 gold badges22 silver badges28 bronze badges

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

2 Comments

Solomon Sam Over a year ago

with you answer and @EricG answer i mixed it up and try to get the result but im not able to change the src per class it just changes in all images together.

donnywals Over a year ago

if you just use $(".imageset") all images with class imageset will change. $(".imageset")[0] would change only the first image with class imageset. ($(".imageset") behaves like an array)

EricG · Accepted Answer · 2012-07-13 19:30:25Z

1

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?

edited Jul 13, 2012 at 19:30

answered Jul 12, 2012 at 22:20

EricG

3,8491 gold badge25 silver badges35 bronze badges

4 Comments

EricG Over a year ago

I guess I didn't understand your question properly.

Solomon Sam Over a year ago

with .shift() im am only getting the first source in the array. what i did is .slice(1, jsondata.images.length) so i get all except the first

Solomon Sam Over a year ago

relevantImages[ i ].src = relevantSources[ i ]; this part dosent work im not sure why

EricG Over a year ago

Sorry, I'll update the post properly (relevantImages => relevantImageElements)

Solomon Sam · Accepted Answer · 2012-07-13 20:15:51Z

0

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);
});

answered Jul 13, 2012 at 20:15

Solomon Sam

2683 silver badges16 bronze badges

Collectives™ on Stack Overflow

change image source with JSON data with javascript / jQuery

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related