Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    looping through json

    looping through json notation

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

    Code:
    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:

    Code:
    ...
    <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.

    Code:
    $(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.

    Code:
    $(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:

    Code:
    $(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

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    367
    Thanks
    9
    Thanked 53 Times in 52 Posts
    Maybe...

    If you can reformat the that part of JSON to have array object, iterating the thumbnails would be much easier:
    Code:
    ...
      "TheThumbnails": [
        "first.png",
        "second.png",
        "third.png",
        "fourth.png",
        ...
      ]
    ...
    And your last posted codes would be like:
    PHP Code:
    function insertCars(){
      var 
    thumbs cars_data.haveAlook.TheThumbnails;
      $(
    ".vehicle_row a").each(function(i){
        $(
    this).html('<img src="/comparetherange/images/' thumbs[i] + '" alt="">');
      });

    Last edited by hdewantara; 07-29-2012 at 11:25 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •