SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Try this function:
    Code:
    function insertCars(){
      var i = 0;
      console.log(car);
      $(".vehicle_row a").each(function(){
        i++;
        var car = cars_data.haveAlook.TheThumbnails['thumb' + i];
        $(this).html('<img src="/comparetherange/images/' + car + '" alt="">');
      });
    }
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MarPlo View Post
    Hi,
    Try this function:
    thanks for that, I have now another question about json but I will open another thread.
    Thanks a lot for that


Bookmarks

Posting Permissions

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