javascript - display images from json object array -

i'm trying output series of images in html external json file. unfortunately cannot change way json formatted , can't seem find right way access image urls use them src attribute. code came with

$.getjson( "json/data.json", function( data ) {  var mhtml = ''; $.each(data["item"].images, function(key, val){  (var i=0; i< data["item"].images.length; i++) { var img = data["item"]images[i]; }  var alt = data["item"].name;     mhtml += '<li><div class=""><img src="'+val.img+'" /></div>';     mhtml += '<h1 class="title">'+alt+'</h1>';     mhtml += '</li>'; }); var $ul = $('<ul>').append($(mhtml));. $('#mydiv').append($ul);  }); 

it counts images , outputs elements can't access url parameters. how json file formatted

{ "item": {     "name": "blue dress",     "details": "graphic print, logo.",     "composition": "composition: 94% cotton, 6% elastam.",     "modeldetails": [         "modeal wearing size m",         "measures: 86 - 60 - 90",         "height: 178cm"     ],     "images": [         "http://cdn.myoutfits.biz/41/xxxxxxx_001.jpg",         "http://cdn.myoutfits.biz/41/xxxxxxx_002.jpg",         "http://cdn.myoutfits.biz/41/xxxxxxx_003.jpg",         "http://cdn.myoutfits.biz/41/xxxxxxx_004.jpg"     ] } } 

thanks helping

you have several issues.

1. looping on images twice - $.each loop
2. getting alt each time.
3. val.img not exist

here working version - make sure run after mydiv exists

data = {      "item": {          "name": "blue dress",              "details": "graphic print, logo.",              "composition": "composition: 94% cotton, 6% elastam.",              "modeldetails": [              "modeal wearing size m",              "measures: 86 - 60 - 90",              "height: 178cm"],              "images": [              "http://cdn.myoutfits.biz/41/xxxxxxx_001.jpg",              "http://cdn.myoutfits.biz/41/xxxxxxx_002.jpg",              "http://cdn.myoutfits.biz/41/xxxxxxx_003.jpg",              "http://cdn.myoutfits.biz/41/xxxxxxx_004.jpg"]      }  }    var alt = data["item"].name,mhtml="";  $.each(data["item"].images, function (i, img) {      mhtml += '<li><div class=""><img src="' + img + '" /></div>';      mhtml += '<h1 class="title">' + alt + '</h1>';      mhtml += '</li>';  });  var $ul = $('<ul>').append($(mhtml));  $('#mydiv').append($ul);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="mydiv"></div>