get variables from different objects in json

[dupalo]

Hi guys, another json question about the same script.
Having the json notation below

my_data={
 "seeThise": {
  "xmlns:fo": "http://www.w3.org/1999/XSL/Format",
  "xmlns:inlineData": "Lookup",
  "CatAtts": {
   "price": "Price",
   "m": "342",
   "acceltra": "456",
   "tps": "324",
   "seass": "456",
   "emmits": "345",
   "inse": "456",
   "wr": "435",
   "torate": "435"
  },
  "Range": {
     "SmallFamily": {
      "text": "Small Family",
      "firstOne": {
       "ytru": "bfre",
       "tre": "345",
       "uytr": "333",
       "price": "10815",
       "seder": "0",
       "back": "45",
     "discount": "3555"     
     }
     "Big":{
     "attr": "one",
     "attr23": "ist",
     "fred": "ew3",
     "price": "243547"
     }
     
     "small":{
     "gr": "rtg",
     "re4": "ytr5",
     "price": "rhfhy7",
     "tye": "fdfgd"
     }
     "otheratt":{
     "tresta": "ytr6",
     "bastr": "rte",
     "price": "32456"     
     }
     }
    }
   }
  }

this time I have to loop through variables placed in a different objects and get the values out to be used in the script. Previously in here [webmasterworld.com...] all the variables were in
the same place, but now they are all scattered around. So I need to get all the "price" variables except from the first one (there is one in each object) then
loop through each image in the below html and use the numerical values taken from the json to update the "left" property of the css for each image and move it towards the right. Pretty straightforward if done to 1 single image, but can't figure out how to do this to many images at the same time.
Here's the html

HTML:

 <div class="myThumbnails">
  <a href="javascript:void(0)"><img src="first.png" alt=""></a>
  </div>
  <div class="row">
  <a href="javascript:void(0)"><img src="second.png" alt=""></a>
  </div>
  <div class="row">
  <a href="javascript:void(0)"><img src="third.png" alt=""></a>
  </div>
  <div class="row">
  <a href="javascript:void(0)"><img src="fourth.png" alt=""></a>
  </div>
  <div class="row">
  <a href="javascript:void(0)"><img src="fifth.png" alt=""></a>
  </div>
  <div class="row">
  <a href="javascript:void(0)"><img src="sixth.png" alt=""></a>
  </div>
  <div class="row">
  <a href="javascript:void(0)"><img src="seventh.png" alt=""></a>
</div>
</div>

and this is the code, as advised by daveVk, that I used to loop through the images in the same object.

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

So, first question is what's the syntax to get the price variables in different objects at the same time? TO get one, it is easy enough I guess
my_data.Range.SmallFamily.firstOne.price but I need some sort of array I suppose to get them all at the same time, then within a loop maybe(?) assign the values
I got from the variable to the "left" css property of each image. Does this need to be done in an array/loop or what please? I am a bit lost
Hope that makes sense, but I can't think of any way to do it
thanks

[daveVk]

Is there some pattern to it like

my_data.Range.*.firstOne.price
OR
my_data.Range.*.*.price

where * matches any value

What do want do with prices when you get them, for example where does
SmallFamily.firstOne price end up.

[dupalo]

Well these are the variables,
my_data.Range.SmallFamily.firstOne.price
my_data.Range.SmallFamily.Big.price
my_data.Range.SmallFamily.small.price
my_data.Range.SmallFamily.otheratt.price
so there seems to be some kind of pattern like
my_data.Range.SmallFamily.*.price

What I want to do is this: loop through the json variables (say I have 4) and being able to get the numerical values from inside the "price" variables
and use that number to update the left properties of my images css. In other words, use that numerical value to move the images left in their container
Assume I have 4 images - see the html in the thread - each numerical value will be assigned to each images, so I am thinking, do I need some sort of loop?
that gets each value in "price" in json and copy it into each image css
I have one loop already in my script - it's the one you suggested - which allows me to grab the images I need from json, but as I said the problem with
it is that that loop (each function if you like) gets images that are all in the same object, whereas here I am attempting to get variables in a different
object.
Hope that's clear : - )
thanks

[daveVk]

I assume the prices are in the same order as the images ?

You could rely on that, or better to name them ? say

<a href="javascript:void(0)" id="firstOne"><img src="first.png" alt="" ></a>
...
<a href="javascript:void(0)" id="Big"><img src="first.png" alt="" ></a>
...
etc

Assuming the latter then inside $(".vehicle_row a").each(function(){

var price = my_data.Range.SmallFamily[this.id].price;

[dupalo]

Hi thanks for that, yes the prices and images are in the same order, but in the html neither the <a> nor the actual image have an id.
So, I believe, I could do this rather
$(".vehicle_row a").each(function(){
var price = my_data.Range.SmallFamily[this].price;
and remove the id. WOuld that work do you reckon?
thanks

[dupalo]

And one more thing sorry, but the keyword this in
$(".vehicle_row a").each(function(){
var price = my_data.Range.SmallFamily[this.id].price;
indicates .vehicle_row a id whereas I need to select the missing string in the json call, which doesn't have anything to do with the link tag but with the thumbnail image. Sorry I can't get my head around that

[Fotiman]

but in the html neither the <a> nor the actual image have an id

Do you have the ability to change the HTML? If so, I would make the change to put an ID on them. If not, then I'd create a map of HTML objects to JSON properties like:

var priceMap = {
  ".myThumbnails img": my_data.Range.SmallFamily.firstOne.price,
  ".row:nth-child(1) img": my_data.Range.SmallFamily.Big.price,
  ".row:nth-child(2) img": my_data.Range.SmallFamily.small.price,
  ".row:nth-child(3) img": my_data.Range.SmallFamily.otheratt.price
};

$.each(priceMap, function(key, value) {
  $(key).css("left", value);
});

[daveVk]

The issue is knowing what price goes with what image, adding the id is the most direct way, if that can be done.

Using this ( the link element ) inside the [] will not work as a string such as 'firstOne' is expected.

A Map as Fotiman suggests is good idea.

To fit in with existing code

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

[dupalo]

hi guys, thanks for getting back to me.
The map idea is nice so I might give that a try. Before doing that though, I have one more question and an amendment to my code.
I have realized - sorry if I have done it only now but this json is huge and every day I discover something new - some of objects containing the prices are not all within the main SmallFamily objects, but outside it or inside other objects, so this notation var price = my_data.Range.SmallFamily[this.id].price; might not work for all of them. Assuming I would like to give ids to all the a tage, what I need in the javascript - sorry if this is wrong - is more on the lines of var price = my_data.Range.[].[this.id].price; or var price = my_data.Range.*.[this.id].price;. Is this legal? If so how would I achieve this with ids and classes?

[Fotiman]

The map approach that I suggested should still work for you:

var priceMap = {
  ".myThumbnails img": my_data.Range.SmallFamily.firstOne.price,
  ".row:nth-child(1) img": my_data.Range.SmallFamily.Big.price,
  ".row:nth-child(2) img": my_data.Range.SmallFamily.small.price,
  ".row:nth-child(3) img": my_data.Range.SmallFamily.otheratt.price
};

The value on the left is the "key" in the map. The value I'm using as the key is the unique selector for the element to be associated with the value in the map. The value is whatever specific property in the JSON you've mapped to it. You just need to know what that property is going to be and enter it in this map. So you might have one value like:
my_data.Range.SmallFamily.firstOne.price
and another like:
my_data.Range.CosbyFamily.lastOne.price
But you define the explicit mapping. Trying to do something dynamic might be more difficult.

[daveVk]

As there is no simple pattern, the map option is probably the better option.

To fit in with existing code

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

The use (misuse?) of an 'a' tag like
<a class="SmallFamily firstOne" ...
is also possible