отображать изображения из массива объектов json

Question

Я пытаюсь вывести серию изображений в html из внешнего json-файла. К сожалению, я не могу изменить способ форматирования json, и я не могу найти правильный способ доступа к URL-адресам изображения, чтобы использовать их как атрибут src. это код, я придумал

$.getJSON("json/data.json", function(data) { 

var mhtml = ''; 
$.each(data["item"].images, function(key, val){ 

for (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); 

}); 

успешно подсчитывает изображения и выводит элементы, но я не могу получить доступ к параметрам URL. это как файл JSON отформатирован

{ 
"item": { 
    "name": "blue dress", 
    "details": "graphic print, Logo.", 
    "composition": "Composition: 94% Cotton, 6% Elastam.", 
    "modelDetails": [ 
     "Modeal wearing a 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" 
    ] 
} 
} 

благодарит всех за помощь

Answer 1

У вас есть несколько вопросов.

1. зацикливание над изображениями в два раза - $ .each петля
2. получать альт каждый раз.
3. val.img не существует

Вот рабочая версия - действительно убедитесь, что он запускается после mydiv существует

data = { 
 
    "item": { 
 
     "name": "blue dress", 
 
      "details": "graphic print, Logo.", 
 
      "composition": "Composition: 94% Cotton, 6% Elastam.", 
 
      "modelDetails": [ 
 
      "Modeal wearing a 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>

Answer 2

Проверьте, если это может помочь вам

var data = { 
"item": { 
    "name": "blue dress", 
    "details": "graphic print, Logo.", 
    "composition": "Composition: 94% Cotton, 6% Elastam.", 
    "modelDetails": [ 
     "Modeal wearing a 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" 
    ] 
} 
} 

$(document).ready(function(){ 
    console.log(data.item.images); 
    var alt = data.item.name; 
    var mhtml=""; 

    $.each(data.item.images,function(k,v){ 
     mhtml += '<li><div class=""><img src="'+data.item.images[k]+'" /></div>'; 
    mhtml += '<h1 class="title">'+alt+'</h1>'; 
    mhtml += '</li>'; 
    }) 

    alert(mhtml) 


console.log(mhtml) 
$('#mydiv').append(mhtml); 
}); 

http://plnkr.co/edit/kz2WI6FEk0atgoUFJ0Jf?p=preview

Answer 3

вы делаете Еогеасп и для ... я не понимаю, почему вы делаете внутреннюю Cicle (для).

Если вы изменяете

mhtml += '<li><div class=""><img src="'+val.img+'" /></div>'; 

в

mhtml += '<li><div class=""><img src="'+val+'" /></div>'; 

вы можете увидеть некоторые изображения