0

我正在从博客 API 解析 JSON 提要，但它抛出以下错误：

37:59 未捕获的类型错误：无法读取未定义的属性“url”

以前它工作正常，没有任何问题，但突然错误不断出现，没有任何显示。我一直在寻找 stackoverflow 并关注了这篇文章，但错误并没有消失。也许博主已经更改了object我无法弄清楚的节点。

Javascript代码：

<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/

4

2 回答 2

1

如果您console.log(json.feed.entry)在小提琴中运行，您会看到media$thumbnail返回的对象中没有调用任何键。这就是您的代码失败的原因var postImage = json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s640/');- 它试图访问url不存在的项目的属性。

也许 API 曾经使用该密钥，但现在不再使用，或者您请求的条目中没有可用的缩略图。除了 Blogger 徽标之外，我没有看到带有图像文件的新密钥。

于 2020-05-30T09:56:19.050 回答
0

更新：您尝试访问的图片不在您收到的对象中。这就是你得到错误的原因。( json.feed.entry[i].media$thumbnail)

您收到的对象中没有图片。这是唯一出现的图标。我把它们。

<!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>

于 2020-05-30T09:18:22.913 回答