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

Question

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/

score 1 · Answer 1 · answered May 30 '20 at 09:56

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.

CanUver · Answer 2 · 2020-05-30T10:12:44.263

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>

I tried. This error came `Uncaught ReferenceError: mycallback is not defined` — yaqoob, May 30 '20 at 09:23
Yes thats the complete part, it was working previously i haven't changed a bit and suddenly stops working and giving the error in mentioned in the question. — yaqoob, May 30 '20 at 09:26
can you throw away the source api address and documentation page, if any ? I'd like to examine it. — CanUver, May 30 '20 at 09:38

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

2 Answers2