Question

这是我到目前为止所拥有的。我正在尝试解析json文件并获取img路径和宽度获取GETJson json中每条记录的返回值并附加到“Gallery”里面一个名为thumbs的类的无序列表。因此，不是在html中有几行代码“li img src = images of path”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 + '+ '" width="' 
                               + val.width + '" /></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填充。基本上，我在div中使用div id = Gallery和ul，名为thumbs_1 with class = thumbs

div id = GALLERY
  ul id =“thumbs_1”class =“thumbs”
  李＆GT; “img src =”images / image_11.jpg“width = 600”这样总共有11行。而不是在HTML中对此进行编码我只想使用GetJson动态地放置相同的代码行。然后一旦DIV填充了   用这个
  $（）。就绪（函数（）{       $（ '＃库'）。flickrGallery（{
  它调用了一个特定的函数   已经开发并且可以创建照片库。   对不起有任何困惑，谢谢你已帮忙。

Answer 1

你的json在最后一个“}”之后是一个额外的昏迷，而我实际上并不确定你能在数组中“.append”。你可以试试这样的东西

var items = '<ul>';

          $.each(data, function(key, val) {
            items += '<li><img src="' + val.image + '+ '" width="' 
                               + val.width + '" /></li>';
            });
          items += '</ul>';

然后在#gallery中添加'items'var，就像这样

$('#gallery').append(items);

但我不确定你要做什么。我假设您使用“alert（）”测试了代码的每一部分，看它是否运行良好。

Answer 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")
       )
   );
});

Answer 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 + '" width="' 
                               + val.width + '" /></li>');
            });

          $('<ul/>', {
            'class': 'thumbs',
            'id':'thumbs_1',
            html: items.join('')
          }).appendTo('#Gallery');

          //Once all ul are created call the gallery function
          $('#Gallery').flickrGallery();
    });
});
</script>

Answer 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");
         });
 });

/ *]]＆gt; * /

<body>
    <div class="container">
            <div class="span-24">
                    <div id="posts">
                    </div>
            </div>
    </div>

尝试使用json文件和Getjson用img src填充<li> </li>

4 个答案: