Iterating over json with jquery only returns the first object

Question

For some reason I can't get jquery.each to return anything past the first object.

my function is as follows...

$(".product_list li").hover(function(event){
    var id = $(this).attr('id');
    console.log(id)
    function getData() {
      $.getJSON("products.json", function(data) {
        var product; 
        $.each( data.products, function(i, obj) {
          if (obj.id === id) 
            product = obj;
        var newImage = product.medium_image;
        console.log(product);
        $("img.image").replaceWith("<img class='image' src="+newImage+"/>");
        var product_description = "<p><strong>"+product.brand+"</strong>"+" "+product.desc+"<br>"+product.color+" "+product.energy_star+"</p>";
        $(product_description).prependTo($('#hero_description'));
        var features = product.features;
        $('#hero_features li').each(function (index) {
          $(this).text(features[index]);
      });
        var price = "<small class='price'>"+product.price+"</small>";
        $(price).appendTo($('.cart'));
        console.log(product.features);
        return false;
    });
    });
  }
  getData(id);
});

and here is my json file...

{
  "products": [
    {
      "id": "product_1",
      "brand": "Whirlpool",
      "desc": "4.5 Cu. Ft. Duet Steam Front Load Washer",
      "color": "(Color: White)",
      "energy_star": "ENERGY STAR",
      "small_image": "assets/images/01_sm.jpg",
      "medium_image": "assets/images/01_md.jpg",
      "price": "$1,599.00",
      "features": [
        "ENERGY STAR qualified",
        "NSF Certified Sanitary cycles",
        "FanFresh option"
      ]
    },
    {
      "id": "product_2",
      "brand": "Whirlpool",
      "desc": "12.3 Cu. Ft. Front Load Washer",
      "color": "(Color: Lunar Silver)",
      "energy_star": "ENERGY STAR",
      "small_image": "assets/images/02_sm.jpg",
      "medium_image": "assets/images/02_md.jpg",
      "price": "$1,599.00",
      "features": [
        "6th Sense technology",
        "Oxi Dispense option",
        "Internal water heater"
      ]
    },
    {
      "id": "product_3",
      "brand": "Maytag",
      "desc": "4.5 Cu. Ft. Front Load Steam Washer (Color: Cranberry Red) ENERGY STAR",
      "small_image": "assets/images/03_sm.jpg",
      "medium_image": "assets/images/03_md.jpg",
      "price": "$1,499.00",
      "features": [
        "14 automatic cycles",
        "Clean Washer cycle with Affresh",
        "CEE Tier III qualified"
      ]
    },
    {
      "id": "product_4",
      "brand": "Electrolux",
      "desc": "4.7 Cu. Ft. Wave-TouchTM Front Load Washer (Color: Silver Sands) ENERGY STAR",
      "small_image": "assets/images/04_sm.jpg",
      "medium_image": "assets/images/04_md.jpg",
      "price": "$1,499.00",
      "features": [
        "4.5 cu. ft. stainless steel wash basket",
        "1400 RPM maximum spin speed",
        "Direct Inject wash system"
      ]
    },
    {
      "id": "product_5",
      "brand": "Maytag",
      "desc": "4.5 Cu. Ft. Front Load Washer (Color: Oxide) ENERGY STAR",
      "small_image": "assets/images/05_sm.jpg",
      "medium_image": "assets/images/05_md.jpg",
      "price": "$1,499.00",
      "features": [
        "Smooth Spin technology",
        "Quiet Wash Plus noise reduction system",
        "FanFresh option"
      ]
    },
    {
      "id": "product_6",
      "brand": "Maytag",
      "desc": "6.5 Cu. Ft. Front Load Washer (Color: White) ENERGY STAR",
      "small_image": "assets/images/06_sm.jpg",
      "medium_image": "assets/images/06_md.jpg",
      "price": "$1,599.00",
      "features": [
        "14 automatic cycles",
        "Clean Washer cycle with Affresh",
        "CEE Tier III qualified"
      ]
    }
  ]
}

I know it has to be a stupid mistake somewhere, but I just can't see it.

Answer 1

Ok. Turns out I was going about it all wrong for what I was trying to accomplish. Here is the code I ended up using,

$(".product_list li").hover(function(event){
        var viewing = $(this).attr('id');
         function getData() {
            $.getJSON("products.json", function(data) {
                //console.log(data.products);
                for (i = 0; i < data.products.length; i++) {
                    if (data.products[i].id === viewing) {
                      var product = data.products[i];
                        $("img.image").replaceWith("<img class='image' src="+product.medium_image+"/>");
                        $("p.brand").replaceWith("<p class='brand'><strong>"+product.brand+"</strong>"+" "+product.desc+"<br />"+product.color+" "+product.energy_star+"</p>");
                        $("small.price").replaceWith("<small class='price'>"+product.price+"</small>");
                        var features = product.features;
                        console.log(features);
                        $('#features li').each(function (index) {
                        $(this).text(features[index]);
                         });
                        return;
                    }
                }
          });
         }
         getData(viewing);
      });

the for loop proved much easier to work with than jquerys' .each(). Prob a lack of understanding on my part. :)

Answer 2

U have return false from function. So each has stopped, see http://api.jquery.com/jquery.each/

Answer 3

Return false will cause the each loop to cancel