homepage Welcome to WebmasterWorld Guest from 107.22.138.215
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
looping through json
dupalo




msg:4479727
 3:17 pm on Jul 28, 2012 (gmt 0)

looping through json notation

Hi all, I wonder if you can help me again with some more json.
I have this json fragment:

cars_data={
"haveAlook": {
"xmlns:fo": "http://www.w3.org/1999/XSL/Format",
"xmlns:inlineData": "Lookup",
"CategoryAttributes": {
"attOne": "MyattOne",
"attTwo": "MyattTwo",
"attThree": "MyattThree",
"attFour": "MyattFour",
"attFive": "MyattFive",
"attSix": "MyattSix",
"attSeven": "MyattSeven"
},
"TheThumbnails": {
"thumb1": "first.png",
"thumb2": "second.png",
"thumb3": "third.png",
"thumb4": "fourth.png",
"thumb5": "fifth.png",
"thumb6": "sixth.png",
"thumb7": "seventh.png",
"thumb8": "eight.png",
"thumb9": "ninth.png",
"thumb10": "tenth.png",
"thumb11": "eleventh.png",
"thumb12": "twelfth.png",
"thumb13": "thirteenth.png",
"thumb14": "fourteenth.png",
"thumb15": "fifteenth.png",
"thumb16": "sixteenth.png",
"thumb17": "seventeenth.png"
},
...
What I am trying to achieve here is to get data from this json fragment using jquery/javascript and insert this data in my html (I know that if you haven't javascript enabled you can't do it and bla bla, but that's the way we have decide to implement this). The data I want to get out of the json are the thumbnail images. I have 17 images there that I want to place within the <a> tag in my html. The json fragment is in my script where the rest of the functions are.

Here's the html in question:

...
<div class="vehicle_family odd">
<p>Small family</p>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="clear"></div>
</div><!-- END OF vehicle_family:small family-->
<div class="vehicle_family">
<p>Large family</p>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="clear"></div>
</div><!-- END OF vehicle_family: large family-->
<div class="vehicle_family odd">
<p>MPV</p>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="clear"></div>
</div><!-- END OF vehicle_family: MPV-->
<div class="vehicle_family">
<p>4x4</p>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
<div class="clear"></div>
</div><!-- END OF vehicle_family: 4x4-->
<div class="vehicle_family odd">
<p>Sport</p>
<div class="vehicle_row">
<a href="javascript:void(0)"></a>
</div>
...
Right, I have spent the whole day today trying to find a solution but I couldn't crack this.
My main script attempts are the following:

1)This works in that it insert an image inside every <a>, except that it insert always the same image "thumb1". What I need instead is to insert a different image in every <a>. I should loop through the images in the json notation but I am not sure how to do it.

$(document).ready(function(){
init_compare_range();
});
var cars_data;
function init_compare_range(){
cars_data={rest of the json as above}
insertImages();
}
//insert car thumbnails but at the moment I can only insert 1 image and not all the thumbnails as I would like
$(document).ready(function(){
init_compare_range();
});
var cars_data;
function init_compare_range(){
cars_data={rest of the json as above}
insertImages();
}
function insertCars(){
var car=cars_data.haveAlook.TheThumbnails.thumb1;
console.log(car);
$(".vehicle_row a").each(function(){
$(this).html('<img src="/comparetherange/images/' + car + '" alt="">');
});
}
2)here because car is an object I thought I could access it with an array notation. Obviously, knowing absolutely nothing about json, I was wrong.

$(document).ready(function(){
init_compare_range();
});
var cars_data;
function init_compare_range(){
cars_data={rest of the json as above}
insertImages();
}
//insert car thumbnails
function insertImages(){
var car=cars_data.haveAlook.TheThumbnails;
var index=i;
console.log($(car[0]));
$(".vehicle_row a").each(function(){
$(this).html('<img src="/comparetherange/images/' + car[i] + '" alt="">');
});
}

3)
SO I thought to myself, ok let's use a proper array:

$(document).ready(function(){
init_compare_range();
});
var cars_data;
function init_compare_range(){
cars_data={rest of the json as above}
insertImages();
}
//insert car thumbnails
function insertImages(){
var car= new Array("cars_data.haveAlook.TheThumbnails.thumb1", "cars_data.haveAlook.TheThumbnails.thumb2", "cars_data.haveAlook.TheThumbnails.thumb3");
console.log(car[0]);
$(".vehicle_row a").each(function(){
$(this).html('<img src="/comparetherange/images/' + car[1] + '" alt="">');
});
}
But obviously I was wrong, the console returns the string in the array element as it should.

So, how do I do this please? ANy help at all? All I need is a way to make sure that all the images in json gets within my <a> tags.
thanks

 

daveVk




msg:4479822
 1:39 am on Jul 29, 2012 (gmt 0)

To access car thumbnails try

var thumbNo = 1;
var car=cars_data.haveAlook.TheThumbnails;
$(".vehicle_row a").each(function(){
$(this).html('<img src="/comparetherange/images/' +
+ car['thumb'+thumbNo]
+ '" alt="">');
thumbNo++;
});

Note that car.thumb3 and car['thumb3'] are equivalent.

This assumes the links are in same order as thumb numbers ?

dupalo




msg:4479875
 10:24 am on Jul 29, 2012 (gmt 0)

Hi daveVk, thanks for your post.
Yes the links are in the same order as thumb numbers.
So you effectively don't loop through the images but through the "parent" - not sure if in json the term 'parent' is correct - and then add the thumb name and number with what looks like an array [] notation. So are we treating them as an array, just so I understand.

One question I would really like to ask you. The code I posted above is slightly different from what I have, in that in the real one the json variable have all different names, like
"this_is_thumb": "first_and_good.png",
"hey_another_thumb": "another_thumb.png",
"and_here_another_one": "this_is_fun.png",
just to give you an idea. Now, I think I can change the naming convention to reflect the code I posted above, so I shouldn't have any problem at all. But if that wasn't the case, so say for a second that I had to keep those fancy and all different names, your approach above - just so I know - won't be applicable anymore I suppose? (don't worry no need for new code, it is just for my own information : - ))
thanks

daveVk




msg:4479890
 1:27 pm on Jul 29, 2012 (gmt 0)

The use of [] in javascript in a unconventional, and should not be considered as array access, but as alternative to dot notation

for object a
a.b and a['b'] are the same

for array a
a.0 and a[0] are the same

The advantage of the [] notation is that a variable or expression cant be used inside the [].

Yes I was relying on them being numbered in sequence.

With fancy names I would collect the file names into an array.

var thumbs = []; // does mean array in this case
var x;
for (x in cars_data.haveAlook.TheThumbnails ) { // x holds name of each property in turn
thumbs.push(cars_data.haveAlook.TheThumbnails[x]); // get property x
}

then in html generation use ... + thumbs[thumbNo] + ... with thumbNo starting to 0;

This ignores the 'fancy names' completely.

dupalo




msg:4479902
 2:22 pm on Jul 29, 2012 (gmt 0)

brilliant, thank. I will use the thumb[number] naming convention, it seems easy. I will give it a try and post back in case I run into troubles so I will leave this thread open if it is ok
thanks for your help

dupalo




msg:4480658
 6:43 pm on Jul 31, 2012 (gmt 0)

that worked a treat thanks I have another similar question about json, but I will start another thread

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved