尝试使用 json 文件和 Getjson 用 img src 填充 <li>
Posted
技术标签:
【中文标题】尝试使用 json 文件和 Getjson 用 img src 填充 <li>【英文标题】：Trying to use json file and Getjson to populate <li> with img src 【发布时间】：2011-07-27 20:37:58 【问题描述】：这是我目前所拥有的。我正在尝试解析 json 文件并获取 img 路径和宽度，以获取 GETJson json 中每条记录的返回值，并附加到“Gallery”中一个名为 thumbs 的类的无序列表中。因此，与其在 html 中包含几行代码“li img src= 图像路径”width=“，我可以只读取 json 文件并填充它。
我的 json 看起来像这样：
[ “图像”：“滑块/img/img1.jpg”， “宽度”：400 , “图像”：“滑块/img/img2.jpg”， “宽度”：400 , ]
这是 Getjson 逻辑。
<script type="text/javascript">
$().ready(function()
$.getJSON('fred.json', function(data)
//Collection of li elements
var items = [];
$.each(data, function(key, val)
items.append('<li><img src="' + val.image + '+ '" /></li>');
);
$('<ul/>',
'class': 'thumbs',
html: items.join('')
).appendTo('#Gallery');
//Once all ul are created call the gallery function
$('#Gallery').flickrGallery();
);
);
</script>
感谢您的帮助
我在 json 文件描述中错误地输入了 img 名称。我把它拼写正确了。当我运行 html 时，会发生两件事。图像根本不显示。其他所有内容都会出现背景等，因为图像确实出现了。当我发出警报（项目）时，我可以看到 li 填充。 基本上，我在名为 thumbs_1 的 div 中有一个 div id=Gallery 和 ul，其中 class=thumbs
div id = 画廊 ul id="thumbs_1" class="thumbs" li> "img src="images/image_11.jpg" width=600" 这样一共有11行。我不想在 HTML 中对此进行硬编码，我只想使用 GetJson 动态放置同一行代码。然后一旦填充了 DIV 使用这个 $().ready(函数() $('#Gallery').flickrGallery( 它调用了一个特定的函数 已经开发并用于创建照片库。 很抱歉给您带来任何困惑，并感谢您已经提供了帮助。
【问题讨论】：
图像 != img 。您有“img”：“sliders/img/img1.jpg”，但随后询问 val.image。除非我读错了代码 那么你遇到了什么问题？ 您可以发布您正在使用的 flickrGallery 插件的链接吗？在快速谷歌之后，它看起来希望您传递一个 flickr api 密钥并通过 flickr 下载您的图像。 【参考方案1】：您的 json 在最后一个“”之后作为额外的逗号，我实际上不确定您是否可以在数组中“.append”。你可以试试这样的
var items = '<ul>';
$.each(data, function(key, val)
items += '<li><img src="' + val.image + '+ '" /></li>';
);
items += '</ul>';
然后像这样在#gallery 中添加“items”变量
$('#gallery').append(items);
但我不太确定您要做什么。我假设您使用“alert()”测试了代码的每一部分，看看它是否运行良好。
【讨论】：
【参考方案2】：如果没有 api 密钥，我无法让 flickrGallery 工作，但我创建了两个示例供您使用 GalleryView 浏览。一种使用 jQuery 模板，一种没有。
Gallery Demo with JSON
在你的每个循环中尝试这个(or take a look)
$.each(result, function()
$("#thumbs_1").append(
$("<li>").append(
$("<img>").attr("src", this.image).attr("width", this.width).addClass("thumbs")
)
);
);
【讨论】：
【参考方案3】：您的 .each 中有一个额外的连接，并且应该使用 items.push 而不是 items.append（JSON 末尾有额外的逗号）...以下工作（您断言画廊创作作品）
<script type="text/javascript">
$().ready(function()
$.getJSON('fred.json', function(data)
//Collection of li elements
var items = [];
$.each(data, function(key, val)
items.push('<li><img src="' + val.image + '" /></li>');
);
$('<ul/>',
'class': 'thumbs',
'id':'thumbs_1',
html: items.join('')
).appendTo('#Gallery');
//Once all ul are created call the gallery function
$('#Gallery').flickrGallery();
);
);
</script>
【讨论】：
【参考方案4】：<script type="text/javascript">
$.getJSON('test.json',function(data)
alert(JSON.stringify(data));
$.each(data, function(i,value)
// alert(value.NewsCategory.id + ":" + value.NewsCategory.name + " " + value.NewsCategory.organization_id + " " + value.NewsCategory.last_updated);
var a = value.NewsCategory;
var news = value.News;
$.each(news, function(j,details)
// alert(details.id + " " + details.title + " "+ details.date_created + " " + details.body + " " +details.thumb);
content+= '<p>'+ "ID : "+ news[j].id + " Date Created : " + news[j].date_created + " Title : " + news[j].title +'</p>';
content+= '<a href = #>' + '<img src="' + news[j].thumb + '"/>' + '</a>';
content+= '<br/>';
);
$(content).appendTo("#posts");
);
);
/* ]]> */
<body>
<div class="container">
<div class="span-24">
<div id="posts">
</div>
</div>
</div>
【讨论】：
以上是关于尝试使用 json 文件和 Getjson 用 img src 填充 <li>的主要内容，如果未能解决你的问题，请参考以下文章
JQuery $.getJSON 加载本地 JSON 文件不起作用