How to combine json code to show comment number

Recently I have created a simple code for my blogger or blogspot website to show Author's Data, like author's name with URL, image and their published Posts number.

Then I tried to show the comments number of the Author's. By this url https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleJsonpData we can get a blogger websites all comments. Here we can get All comments with the Name, Comments Messages and many.

So what I tried, to show the number of comments of the Author's alongside their name. I have write this code, but It's not working. There are three author in my blog site, any one of them have some comments in the site.

There are two sectors of my code. I want to make a combination of both code to show comments number of the authors if the authors have any comment.

This is 1st part to get comments. Here I manually applied a name and checked if the name have comments, and show the number.

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

This is the second part to get The Blog Author's Details.

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

I want to combine both codes to find the comment number of the Author's. If Authors have any comment, it should show the number automatically. I don't know how to combine both codes to show the comments number of author if Authors have any comment. Somebody please help me to find out. I tried in many ways, but not working.

The main problem in your code is that you're trying to access author.name in the displayCommentCount function, but author is not defined within the scope of that function. author is defined in the $.getJSON callback function and it is not globally accessible.

To fix the issue, you need to update your displayCommentCount function to accept authorName as a parameter, then compare it with each comment author's name.

Here's the corrected version of your code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<!-- end snippet -->

You somehow used sfwCommentCount variable in html element that was out of that scope, that's why its not working

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<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=10";
let authors = [];
$.getJSON(feedURL, function (data) {
$.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,
comment: 0,
});
}
}
});
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 class="text-gray-700 dark:text-gray-400" id="${author.name}-comment">Comments: ` +
author.comment +
" </div>" +
"</div>" +
"</a>" +
"</div>";
$(".tbt_all_authors-list").append(html);
});
});
function displayCommentCount(data) {
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;
console.log(authors.filter((author) => author.name === authorName).length > 0);
if (authors.filter((author) => author.name === authorName).length > 0) {
authors.forEach((author) => {
if (author.name === authorName) author.comment++;
});
}
}
}
authors.forEach((author) => {
// $(`#${author.name}-comment`)[0].innerText =`Comments: ${author.comment}`;
document.getElementById(`${author.name}-comment`).innerText = `Comments: ${author.comment}`;
});
}
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=10&callback=handleJsonpData";
document.body.appendChild(script);
</script>

<!-- end snippet -->