Question

我需要你的帮助。每次我试图显示它显示的内容几次（通常是4次）但应该只显示一次。我不知道我的代码有什么问题。以下是：

$.ajax({
    url: 'https://' + subParam + '.domain.name/' + akey + '/get_article',
    async: false,
    callback: 'callback',
    crossDomain: true,
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    dataType: 'jsonp',
    success: function (data, status) {
        if (data !== undefined && data.post !== undefined) {
            if (data !== undefined && data.post.author.description > 0) {
                if (data.post.thumbnail_images.large.url !== undefined) {
                    $.each(data.post.thumbnail_images, function (i2, type) {
                        $('#news').append('<div id="nimg" style="background-image: url(' + data.post.thumbnail_images.large.url + ')"></div><a href="author.html?type=authors&id=' + data.post.author.description + '"><div id="circletag" style="background-image: url(' + data.post.author.nickname + ')"></div></a><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div><div><a href="#" onclick="window.open(\'' + data.post.custom_fields.syndication_permalink + '#comments\', \'_system\', \'location=yes\');" id="verstovcomments"></a></div></div>');
                    });
                } else {
                    $('#news').append('<div id="nimg" style="background-image: url(' + defaultNews + ')"></div><a href="author.html?type=authors&id=' + data.post.author.description + '"><div id="circletag" style="background-image: url(' + data.post.author.nickname + ')"></div></a><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div><div><a href="#" onclick="window.open(\'' + data.post.custom_fields.syndication_permalink + '#comments\', \'_system\', \'location=yes\');" id="verstovcomments"></a></div></div>');
                }
            }
        }
    }
});

...

我的json响应如下：

{
    "status": "ok",
    "post": {
        "id": 3211,
        "title": "title",
        "content": "content"
        "thumbnail": "/uploads\/2013\/09\/matkapital-150x150.jpg",
        "thumbnail_size": "thumbnail",
        "thumbnail_images": {
           "full": {
                "url": "/uploads\/2013\/09\/matkapital.jpg",
                "width": 640,
                "height": 427
            },
            "thumbnail": {
                "url": "/uploads\/2013\/09\/matkapital-150x150.jpg",
                "width": 150,
                "height": 150
            },
            "medium": {
                "url": "/uploads\/2013\/09\/matkapital-250x166.jpg",
                "width": 250,
                "height": 166
            },
            "large": {
                "url": "/uploads\/2013\/09\/matkapital-640x426.jpg",
                "width": 640,
                "height": 426
            }
        }
    }
}

是因为我使用$.each还是存在其他问题？

Answer 1

从我可以看到json中没有author属性，因此条件if (data !== undefined && data.post.author.description > 0) {将抛出错误，指出data.post.author未定义。

因此，将条件if (data !== undefined && data.post.author.description > 0) {更改为if (data.post.author && data.post.author.description) {并尝试

在这种情况下，您的数据不会显示任何内容，因为给定的json中没有作者数据

Answer 2

我建议你看看像doT.js这样的JS模板引擎。

然后，您可以轻松创建一个干净的标记结构，并将您的json数据转储到模板引擎...整个迭代和输出由它自己完成，您的JS代码没有这些几乎不可读的标记连接。

这里有一个小例子：

// normally you would have the templace in
// a <script type="text/dotjs-or-so"> block and load it with jquery.

var jsonData = {"array":["banana","apple","orange"]};
var tplstring = 
'{{~it.array :value:index}}'
    +'<div>{{=value}}!</div>'
+'{{~}}';
var tpl = doT.template(tplString);
// render it somewhere
$('#someThing').html(
   tpl(jsonData)
);

请参阅http://olado.github.io/doT/

Answer 3

我刚刚在$ .each（data.post.thumbnail_images，function（i2，type）中将thumbnail_images更改为custom_fields，并且它停止了乘法结果。

 $.ajax({
url: 'https://' + subParam + '.domain.name/' + akey + '/get_article',
async: false,
callback: 'callback',
crossDomain: true,
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'jsonp',
success: function (data, status) {
    if (data !== undefined && data.post !== undefined) {
        if (data !== undefined && data.post.author.description > 0) {
            if (data.post.thumbnail_images.large.url !== undefined) {
                $.each(data.post.custom_fields, function (i2, type) {
                    $('#news').append('<div id="nimg" style="background-image: url(' + data.post.thumbnail_images.large.url + ')"></div><a href="author.html?type=authors&id=' + data.post.author.description + '"><div id="circletag" style="background-image: url(' + data.post.author.nickname + ')"></div></a><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div><div><a href="#" onclick="window.open(\'' + data.post.custom_fields.syndication_permalink + '#comments\', \'_system\', \'location=yes\');" id="verstovcomments"></a></div></div>');
                });
            } else {
                $('#news').append('<div id="nimg" style="background-image: url(' + defaultNews + ')"></div><a href="author.html?type=authors&id=' + data.post.author.description + '"><div id="circletag" style="background-image: url(' + data.post.author.nickname + ')"></div></a><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div><div><a href="#" onclick="window.open(\'' + data.post.custom_fields.syndication_permalink + '#comments\', \'_system\', \'location=yes\');" id="verstovcomments"></a></div></div>');
            }
        }
    }
}

}）;

使用ajax和$ .each重复输出

3 个答案: