CODEWITHSUNDEEP
javascriptjsongoogle-blogger-api
yaqoob
yaqoob

Reputation: 1062

TypeError when parsing Blogger API response: Cannot read property 'url' of undefined

I'm parsing JSON feed from the blogger API but its throwing following error:

37:59 Uncaught TypeError: Cannot read property 'url' of undefined

Previously it was working fine, there weren't any issues but suddenly the error keeps coming up and nothing is displaying. I have looked for stackoverflow and followed this post as well but the error is not going away. Maybe blogger has changed their object nodes that i can't figure out.

Javascript Code:

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle     = json.feed.entry[i].title.$t;
      var postAuthor    = json.feed.entry[i].author[0].name.$t;
      var postSummary   = json.feed.entry[i].summary.$t;
      var entryShort    = postSummary.substring(0,400);
      var entryEnd      = entryShort.lastIndexOf(" ");
      var postContent   = entryShort.substring(0, entryEnd) + '...';
      var postImage     = json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s640/');
      var postTimestamp = json.feed.entry[i].published.$t;
      
      var item = '<div class="col-md-3 mb-4 blogpost-main">';
      var item = item + '<div class="card h-100">';
      var item = item + '<img class="card-img-top" src="' + postImage + '"/>';
      var item = item + '<div class="card-body">';
      var item = item + '<a href=' + postUrl + '><h6 class="card-title">' + postTitle + '</h6></a>';
      var item = item + '<p class="card-text text-muted"><i class="far fa-clock" style="color: #888"></i> <time class="timeago" datetime= '+ postTimestamp +'>' + postTimestamp + '</time></p>';
      var item = item + '</div>';
      var item = item + '</div>';
      var item = item + '</div>';
      
      //document.write(item);
      document.getElementById("news").appendChild(item);
      console.log(item);

    }
  }
</script>
<script src="https://www.wallpapersoverflow.com/feeds/posts/summary?orderby=published&max-results=4&alt=json-in-script&callback=mycallback"></script>
    <div id="news"></div>

JsFiddle: https://jsfiddle.net/645pg9rz/

Upvotes: 0

Views: 352

Answers (2)

CanUver
CanUver

Reputation: 1774

Updated: the pictures you're trying to reach are not in the object that came to you. that's why you get the error. (json.feed.entry[i].media$thumbnail)

there are no pictures in the object that came to you. It's the only icon that comes. I put them.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Document</title>

  <style>

  </style>
</head>

<body>




  <div class="row" id="news"></div>




  <script>
    function mycallback(json) {
      console.log(json)
      for (var i = 0; i < json.feed.entry.length; i++) {
        for (var j = 0; j < json.feed.entry[i].link.length; j++) {
          if (json.feed.entry[i].link[j].rel == 'alternate') {
            var postUrl = json.feed.entry[i].link[j].href;
            break;
          }
        }
        var postTitle = json.feed.entry[i].title.$t;
        var postAuthor = json.feed.entry[i].author[0].name.$t;
        var postSummary = json.feed.entry[i].summary.$t;
        var entryShort = postSummary.substring(0, 400);
        var entryEnd = entryShort.lastIndexOf(" ");
        var postContent = entryShort.substring(0, entryEnd) + '...';
        var postImage = json.feed.entry[i].author[0].gd$image.src;
        var postTimestamp = json.feed.entry[i].published.$t;
        console.log(postImage)
        var item = '<div class="col-md-3 mb-4 blogpost-main">';
        var item = item + '<div class="card h-100">';
        var item = item + '<img class="card-img-top" src="' + postImage + '"/>';
        var item = item + '<div class="card-body">';
        var item = item + '<a href=' + postUrl + '><h6 class="card-title">' + postTitle + '</h6></a>';
        var item = item + '<p class="card-text text-muted"><i class="far fa-clock" style="color: #888"></i> <time class="timeago" datetime= ' + postTimestamp + '>' + postTimestamp + '</time></p>';
        var item = item + '</div>';
        var item = item + '</div>';
        var item = item + '</div>';

        document.getElementById("news").innerHTML += item;

      }
    }
  </script>
  <script src="https://www.wallpapersoverflow.com/feeds/posts/summary?orderby=published&max-results=4&alt=json-in-script&callback=mycallback"></script>


</body>

</html>

Upvotes: 0

jdaz
jdaz

Reputation: 6063

If you run console.log(json.feed.entry) in your fiddle, you'll see that there is no key called media$thumbnail in the returned objects. That is why your code is failing at var postImage = json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s640/'); - it is trying to access the url property of an item that doesn't exist.

Perhaps the API used to use that key and no longer does, or there are just no thumbnails available in the entries you requested. I don't see a new key with an image file other than the Blogger logo.

Upvotes: 1

Related Questions