Question

我正在尝试从外部json文件输出html中的一系列图像。不幸的是我无法改变json格式的方式，我似乎无法找到正确的方式来访问图像网址，将它们用作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

你有几个问题。

循环两次图像 - $ .each是一个循环
每次都获得alt。
val.img不存在

这是一个工作版本 - 确保它在mydiv存在后运行

＆＃13;

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

＆＃13;

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

＆＃13;

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

你做 foreach 和 ...我不明白你为什么做内部cicle（for）。

如果你改变了

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

到

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

你可以看到一些图片

显示来自json对象数组的图像

3 个答案: