How to retrieve all posts using blogger API by using JavaScript loop

Question

I am trying To Get List of all Blog Posts Using Blogger API by using javascript Loop. I found a solution in StackOverflow too. but that didn't work for me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function handleResponse(response) {
  var post_number  = Object.keys(response.items).length; //number of posts
  for (i=0; i<post_number; i++) {
    $('#content').append('<div id="post' + (i+1) + '" class="post"><p></p></div>');
    $('.post p').html(response.items[i].title);
  }
}
</script>
<script src="https://www.googleapis.com/blogger/v3/blogs/5039479718685240371/posts?callback=handleResponse&key=AIzaSyDxfWmXTRnO5yIp25NvuUEBWKSa_5mqjHA"></script>

below error was occur when I run This Code:{ "message": "Uncaught ReferenceError: $ is not defined", "filename": "https://stacksnippets.net/js", "lineno": 17, "colno": 5 }

nah! I think It only Works with pure javascript only to reduce the load time? — Ajay Malik
– Ajay Malik, Commented Jan 9, 2018 at 15:46

Andrew L · Accepted Answer · 2018-01-09 16:54:56Z

2

I did some trial and error with your code and the first problem you noted was solved by including the jQuery library.

You can use ajax to GET the data instead of including it in a script tag. jQuery will register and call the callback function for you.

The rest worked. Here is a example. I would also suggest changing your key now.

$.ajax("https://www.googleapis.com/blogger/v3/blogs/5039479718685240371/posts?callback=handleResponse&key=AIzaSyDxfWmXTRnO5yIp25NvuUEBWKSa_5mqjHA")

function handleResponse(response) {
  //var post_number = Object.keys(response.items).length; //number of posts
  for (i = 0; i < response.items.length; i++) {
    var titleHtml = '<div id="post' + (i + 1) + '" class="post"><p>' + response.items[i].title + '</p></div>';
    $('#content').append(titleHtml);
  }
}

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

edited Jan 9, 2018 at 16:54

answered Jan 9, 2018 at 16:01

Andrew L

5,5161 gold badge29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ajay Malik Over a year ago

can you tell me how to add post content too in it?

ADyson Over a year ago

"It had some callback logic in", that's just JSONP, surely?

Andrew L Over a year ago

that would be a totally different question and you should try to do it yourself. When you stuck and have a specific question you can come back and post it as a new question. I would suggest googling up on ajax posts

ADyson Over a year ago

@AjayMalik just use the "content" field from the object, just like this is using the title field. If you look at the JSON, that should be obvious, no? And you maybe need to wrap it in some more HTML, but the structure of that is up to you. Do you actually understand any of this code you've got? You seem to be asking for every tiny detail to be given to you 100% complete.

Andrew L Over a year ago

@ADyson thanks for specifying, I never worked with JSONP before

|

Collectives™ on Stack Overflow

How to retrieve all posts using blogger API by using JavaScript loop

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related