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