getting a title tag from json

Question

I need to insert a title tag into my index.html which extracts title from json. I alredy have an image and the link.

  <a class="my-blog" id="post2" href="#">
      <div > 
        //title goes here
      </div>
 and that's my javascript




function loadBlogWidget() {
    $.get("http://blog.lawgeex.com/wp-json/posts").done(function (cResult) {

    for (var i = 0; i < cResult.length; i++) {
    var cPost = cResult[i];
    var strLink = cPost.link;
    var strImageSrc=cPost.featured_image.attachment_meta.sizes.thumbnail.url;
    $("#post" + i).attr("href", strLink);
    $("#post" + i).css("background-image", "url(" + strImageSrc + ")");


}

Hi @Ann welcome to Stack Overflow, can you update your question with any error messages you get or describe what is currently happening, this will help us all answer your question more clearly. — BMac, Oct 29 '15 at 09:17
Yes, I added this line $("#post" + i).append(''); and it jsut returns a name of tag. — nundel, Oct 29 '15 at 09:38
Hi @Ann, you can set it using Javascript. Kindly refer following [article for reference](http://stackoverflow.com/questions/413439/how-to-dynamically-change-a-web-pages-title). Also for more information [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) — Rajesh, Oct 29 '15 at 09:46

score 1 · Answer 1 · edited Jan 11 '19 at 19:29

I saw the json response and it is giving out a list of posts. I'm not quite sure if the question is (1) how to change the title of the html that you have that is displaying the list of posts, or (2) how to change the title of the html the user navigates to.

As far as 1 is concerned, which I assume is your question, you can use document.title = cPost.title, however, the response, as I had mentioned, is a list so I'm assuming you would want the title to be the title of the first post or something.

<html>
<body>
<a class="my-blog" id="post2" href="#">
    <div > 
        //title goes here
    </div>
</a>
</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function loadBlogWidget() {
    $.get("http://blog.lawgeex.com/wp-json/posts").done(function (cResult) {
        var title_changed = false;
        for (var i = 0; i < cResult.length; i++) {
            var cPost = cResult[i];
            var strLink = cPost.link;
            var strImageSrc=cPost.featured_image.attachment_meta.sizes.thumbnail.url;
            $("#post" + i).attr("href", strLink);
            $("#post" + i).css("background-image", "url(" + strImageSrc + ")");
            if(!title_changed){
                document.title = cPost.title;
                title_changed = true;
            }
        }
    });
}
loadBlogWidget();
</script>
</html>

However, be warned that this is a bad idea because the crawlers won't be able to index the page properly as it can't honor the dynamic title changes. Probably, what you can do is have a default title which you want the crawlers to keep track and the have this dynamic title change thing only for users' visibility.

getting a title tag from json

1 Answers1