javascript - 如何结合json代码显示评论数

标签 javascript html jquery json blogger

最近，我为我的博客或 blogspot 网站创建了一个简单的代码来显示作者的数据，例如作者姓名、URL、图像及其发布的帖子数量。

然后我尝试显示作者的评论数。通过这个网址https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleJsonpData我们可以得到一个博主网站的所有评论。在这里我们可以获取所有评论，包括名称、评论消息等等。

所以我尝试在作者的名字旁边显示评论数量。我已经写了这段代码，但它不起作用。我的博客网站有三位作者，他们中的任何一位都在网站上发表过一些评论。

我的代码有两个部分。我想结合这两个代码来显示作者的评论数量(如果作者有任何评论)。

这是获取评论的第一部分。这里我手动申请了一个名字，并检查该名字是否有注释，并显示数量。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="comment-count"></div>
<div id="iacman-comment-count"></div>

<script>
  function displayCommentCount(data) {
    var totalCommentCount = 0;
    var iacmanCommentCount = 0;
    if ('entry' in data.feed) {
      totalCommentCount = data.feed.entry.length;
      for (var i = 0; i < data.feed.entry.length; i++) {
        var authorName = data.feed.entry[i].author[0].name.$t;
        if (authorName === 'Iacman') {
          iacmanCommentCount++;
        }
      }
    }
    document.getElementById('comment-count').innerHTML = '<h2>Total Comments: ' + totalCommentCount + '</h2>';
    document.getElementById('iacman-comment-count').innerHTML = '<h2>Comments by Iacman: ' + iacmanCommentCount + '</h2>';
  }
  function handleJsonpData(data) {
    displayCommentCount(data);
  }
  var script = document.createElement('script');
  script.src = 'https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleJsonpData';
  document.body.appendChild(script);
</script>

这是获取博客作者详细信息的第二部分。

<link href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' rel='stylesheet'/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/7dfc182d96.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>.author-image {cursor: pointer;}</style>

<div class="mb-0 mt-12">
  <h4 class="mb-0 text-black dark:text-gray-300"><i class="fa-solid fa-user-vneck-hair"></i> Authors and Writers </h4>
</div>
<div class="tbt_all_authors-list mt-0 mb-16 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5"></div>

<script>
  let feedURL = "https://tailwindbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=?&max-results=500";
  $.getJSON(feedURL, function(data) {
    let authors = [];
    $.each(data.feed.entry, function(index, entry) {
      if (entry.author) {
        let authorName = entry.author[0].name.$t;
        let authorImage = entry.author[0].gd$image.src;
        let authorProfileUrl = entry.author[0].uri.$t; // Extract the author profile URL
        let authorExists = false;
        let authorIndex;
        $.each(authors, function(index, author) {
          if (author.name === authorName) {
            authorExists = true;
            authorIndex = index;
          }
        });
        if (authorExists) {
          authors[authorIndex].count++;
        } else {
          authors.push({ name: authorName, image: authorImage, count: 1, profileUrl: authorProfileUrl });
        }
      }
    });
    authors.sort(function(a, b) {
      return b.count - a.count;
    });
    $.each(authors, function(index, author) {
      let html = '<div class="flex bg-white dark:bg-gray-700 dark:text-gray-300 shadow rounded">' +
        '<a href="' + author.profileUrl + '" target="_blank" class="author-image flex items-start px-3 py-3">' +
        '<div class="w-20 h-20 rounded-full object-cover mr-4 shadow" style="background-image: url(' + author.image + '); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>' +
        '<div class="">' +
        '<div class="flex items-center justify-between">' +
        '<div class="text-md font-semibold text-gray-900 dark:text-gray-300 mt-3">' + author.name + '</div>' +
        '</div>' +
        '<div class="text-gray-700 dark:text-gray-400">Posts: ' + author.count + ' </div>' +
        '</div>' +
        '</a>' +
        '</div>';
      $('.tbt_all_authors-list').append(html);
    });
  });
</script>

我想结合这两个代码来查找作者的评论号。如果作者有任何评论，它应该自动显示数量。如果作者有任何评论，我不知道如何组合这两个代码来显示作者的评论数量。有人请帮我找出答案。我尝试了很多方法，但没有成功。

最佳答案

代码中的主要问题是您尝试在 displayCommentCount 函数中访问author.name，但作者未在该函数的范围内定义。 author 是在 $.getJSON 回调函数中定义的，并且不可全局访问。

要解决此问题，您需要更新 displayCommentCount 函数以接受authorName 作为参数，然后将其与每个评论作者的姓名进行比较。

这是代码的更正版本:

<link href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' rel='stylesheet'/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/7dfc182d96.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>.author-image {cursor: pointer;}</style>

<div class="mb-0 mt-12">
  <h4 class="mb-0 text-black dark:text-gray-300"><i class="fa-solid fa-user-vneck-hair"></i> Authors and Writers </h4>
</div>
<div class="tbt_all_authors-list mt-0 mb-16 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5"></div>

<script>
  var commentData;

  function getCommentCount(authorName) {
    var sfwCommentCount = 0;
    if ('entry' in commentData.feed) {
      for (var i = 0; i < commentData.feed.entry.length; i++) {
        var commentAuthorName = commentData.feed.entry[i].author[0].name.$t;
        if (commentAuthorName === authorName) {
          sfwCommentCount++;
        }
      }
    }
    return sfwCommentCount;
  }

  function handleJsonpData(data) {
    commentData = data;
  }

  var script = document.createElement('script');
  script.src = 'https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleJsonpData';
  document.body.appendChild(script);

  let feedURL = "https://tailwindbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=?&max-results=500";
  $.getJSON(feedURL, function(data) {
    let authors = [];
    $.each(data.feed.entry, function(index, entry) {
      if (entry.author) {
        let authorName = entry.author[0].name.$t;
        let authorImage = entry.author[0].gd$image.src;
        let authorAbout = '';
        if (entry.author[0].gd$about) {
          authorAbout = entry.author[0].gd$about.$t;
        }
        let authorProfileUrl = entry.author[0].uri.$t; // Extract the author profile URL
        let authorExists = false;
        let authorIndex;
        $.each(authors, function(index, author) {
          if (author.name === authorName) {
            authorExists = true;
            authorIndex = index;
          }
        });
        if (authorExists) {
          authors[authorIndex].count++;
        } else {
          authors.push({ name: authorName, image: authorImage, count: 1, about: authorAbout, profileUrl: authorProfileUrl });
        }
      }
    });

    authors.sort(function(a, b) {
      return b.count - a.count;
    });

    $.each(authors, function(index, author) {
      let authorCommentCount = getCommentCount(author.name);
      let html = '<div class="flex bg-white dark:bg-gray-700 dark:text-gray-300 shadow rounded">' +
        '<a href="' + author.profileUrl + '" target="_blank" class="author-image flex items-start px-3 py-3">' +
        '<div class="w-20 h-20 rounded-full object-cover mr-4 shadow" style="background-image: url(' + author.image + '); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>' +
        '<div class="">' +
        '<div class="flex items-center justify-between">' +
        '<div class="text-md font-semibold text-gray-900 dark:text-gray-300 mt-3">' + author.name + '</div>' +
        '</div>' +
        '<div class="text-gray-700 dark:text-gray-400">Posts: ' + author.count + ' </div>' +
        '<div class="text-gray-700 dark:text-gray-400">Comments: ' + authorCommentCount + ' </div>' +
        '</div>' +
        '</a>' +
        '</div>';

      $('.tbt_all_authors-list').append(html);
    });
  });
</script>

关于javascript - 如何结合json代码显示评论数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76830630/

上一篇：python - Json/奇怪的列转换

下一篇：swift - 在扩展中创建通用排序函数

相关文章：

javascript - jQuery 边框图像(左上、右上、左下、右下)

javascript - 如何触发 :hover transition that includes three overlapping div elements (Venn diagram)

javascript - 与jquery等高？

javascript - jquery 选择第 n 个 child 之后的所有 child

javascript - 为 svg :image 设置圆 Angular

javascript - Morris 图表和 PHP 问题

jquery - 所有 js.erb 都会运行，但不会在 Rails 4 中执行

html - CSS 背景位置相对于文档而不是元素？

javascript - CSS 将渐变转换为 Canvas 版本

javascript - 通过 jquery 添加的数据属性不可用于选择元素

©2024 IT工具网  联系我们