For-in循环通过带有ajax的Tumblr帖子

时间:2014-11-25 04:43:54

标签: ajax tumblr

期望$(".post-title").append(postTitle);将返回该帖子的标题,postBody也是如此。然而,当我在console.log中返回这些变量> undefined时。

$.ajax({
    url: "http://api.tumblr.com/v2/blog/ohc-gallery.tumblr.com/posts?api_key=***",
    dataType: 'jsonp',
    success: function(res){
      var postings = res.response.posts;
      var postTitle = "";
      var postBody = "";
        $(".post-title").append(postTitle);
        $(".post-body").append(postBody);

        for (var i in postings){
            postTitle = postings[i].title;
            postBody = postings[i].body;
        }
            console.log("postBody: " + postBody);

    }
});

我错过了关于Javascript关闭的基本信息......我现在真的不知道。我只是想循环创建的帖子数据以供以后显示。

Github JS代码 - https://github.com/mrcn/ohc/blob/master/js/tumblr.js

Github HTML代码 - https://github.com/mrcn/ohc/blob/master/index-posting.html#L82-L89

我明白了。问题在于我打算如何在网站上显示这些信息,我不得不相应地更改代码。这个想法是显示配对的博客帖子标题和条目。问题是所有的标题都出现在一起,所有的身体都出现在一起 - 不分别配对。

更新的代码更符合 -

Javascript -

        //use $.each() or Array.forEach
        $.each(postings, function (i, post) {
            $(".post ").append("<h3>" + post.title + "</h3>" + post.body + "<br><br>");

        });
    }
});

HTML -

             <div class="post-wrap"><!--post-wrap-->
                    <div class="post">

                    </div>
                </div><!--post-wrap-->

2 个答案:

答案 0 :(得分:1)

for..in用于迭代对象... posts是一个数组,您可以使用普通for (var i=0;i<x;i++)循环或任何其他迭代方法,如$.each()或{{3 }}

$.ajax({
    url: 'http://api.tumblr.com/v2/blog/ohc-gallery.tumblr.com/posts?api_key=***',
    dataType: 'jsonp',
    success: function (res) {
        var postings = res.response.posts;
        var postTitle = '';
        var postBody = '';

        //use $.each() or Array.forEach
        $.each(postings, function (i, post) {
            $(".post-title ").append(post.title);
            $(".post-body ").append(post.body);
        })
    }
});

答案 1 :(得分:0)

并非每种帖子类型都支持titlebody。您目前有三个帖子,两个文字和一张照片。照片信息类型仅支持photoscaption,这会导致undefined

检查API以获取更多详细信息:https://www.tumblr.com/docs/en/api/v2