I want to show amount of each individual and the sum of amounts from its children alongside.
The values are good, the problem seems to be in the calculateTotalAmount function or the rootSponsors.forEach() function.
This is the code I have written so far
<script>
// Function to transform the flat list of sponsors into a tree structure
function buildSponsorTree(sponsors, amn) {
console.log(sponsors, amn);
const sponsorMap = new Map();
// Map each sponsor by its ID for easy access
sponsors.forEach(sponsor => {
sponsorMap.set(sponsor.id, {...sponsor, children: []});
});
const rootSponsors = [];
// Build the tree structure where sponsor_id is the child and id is the parent
sponsors.forEach(sponsor => {
if(sponsor.sponsor_id !== -1) {
// If the sponsor has a sponsor_id, it's a child of another sponsor (id is parent)
const parent = sponsorMap.get(sponsor.sponsor_id);
if(parent) {
parent.children.push(sponsorMap.get(sponsor.id));
}
} else {
// If sponsor_id is null, it is a root sponsor (top-level)
rootSponsors.push(sponsorMap.get(sponsor.id));
}
});
const amountMap = new Map();
amn.forEach(amount => {
amountMap.set(amount._id, amount);
});
function calculateTotalAmount(sponsor) {
// Calculate total amount for this sponsor
let total = sponsor.amount || 0;
// Recursively calculate the total for all children
sponsor.children.forEach(child => {
total += calculateTotalAmount(child);
});
// Add the total amount to the sponsor
sponsor.totalAmount = total;
return total;
}
// Calculate total amount for all root sponsors
rootSponsors.forEach(sponsor => {
const amt = amountMap.get(sponsor.id);
if(amt) {
sponsor.amount = amt.totalAmount;
} else {
sponsor.amount = 0;
}
calculateTotalAmount(sponsor); // Calculate total for the sponsor and descendants
});
return rootSponsors; // Return the root nodes which form the tree
}
// Function to recursively render the sponsor tree
function renderSponsorTree(sponsors) {
let html = '<ul>';
sponsors.forEach(sponsor => {
console.log(sponsor.totalAmount, sponsor.amount);
html += `
<li>
<strong>${sponsor.name}</strong> (ID: ${sponsor.id}) Amount - ${sponsor.amount} (TotalAmount - ${sponsor.totalAmount})
${sponsor.children.length > 0 ? renderSponsorTree(sponsor.children) : ''}
</li>
`;
});
html += '</ul>';
return html; // Return the HTML representation of the tree
}
// Fetch sponsor data from the server and process it into a tree structure
window.onload = function() {
axios.get("http://localhost:5000/show").then((response) => {
const sponsors = response.data[0]; // Extract the sponsor data from the response
const amn = response.data[1];
const sponsorTree = buildSponsorTree(sponsors, amn); // Build the tree from the flat list
const treeHtml = renderSponsorTree(sponsorTree); // Render the tree into HTML
console.log(sponsorTree);
document.getElementById("show").innerHTML = treeHtml; // Display the tree on the page
}).catch((error) => {
console.error('Error fetching data:', error); // Handle any errors
alert('Error loading sponsor data.');
});
};
</script>
Below is the output:
Raj (ID: 1) Amount - 500 (TotalAmount - 500)
Ali (ID: 2) Amount - undefined (TotalAmount - 0)
Riya (ID: 3) Amount - undefined (TotalAmount - 0)
Piya (ID: 4) Amount - undefined (TotalAmount - 0)
Sana (ID: 5) Amount - undefined (TotalAmount - 0)
Dani (ID: 6) Amount - undefined (TotalAmount - 0)
Uri (ID: 7) Amount - undefined (TotalAmount - 0)
Pari (ID: 10) Amount - undefined (TotalAmount - 0)
Lara (ID: 11) Amount - undefined (TotalAmount - 0)
Rai (ID: 16) Amount - undefined (TotalAmount - 0)
abv (ID: 21) Amount - undefined (TotalAmount - 0)
Isha (ID: 14) Amount - undefined (TotalAmount - 0)
Jass (ID: 23) Amount - undefined (TotalAmount - 0)
Faliz (ID: 9) Amount - undefined (TotalAmount - 0)
Ravi (ID: 15) Amount - undefined (TotalAmount - 0)
Harsh (ID: 18) Amount - undefined (TotalAmount - 0)
Jake (ID: 20) Amount - undefined (TotalAmount - 0)
Lily (ID: 8) Amount - undefined (TotalAmount - 0)
Daya (ID: 12) Amount - undefined (TotalAmount - 0)
Goli (ID: 22) Amount - undefined (TotalAmount - 0)
Navi (ID: 13) Amount - undefined (TotalAmount - 0)
Isha (ID: 17) Amount - undefined (TotalAmount - 0)
Jay (ID: 19) Amount - undefined (TotalAmount - 0)
The amount for the first id is correct but the totalAmount should be the sum of all its children, in this case, sum of all the tree, so the 500 value above is wrong and if in let total = sponsor.amount || 0; the || 0 is omitted then totalAmount returns Nan or undefined.
This is the backend-
app.get("/show", async (req, res) => {
try {
const data = await sponsorModel.find();
const amount = await amountModel.aggregate([
{
$group:
{
_id: "$id",
totalAmount: { $sum: "$amount" }
}
}
]);
res.status(200).json([data, amount]);
} catch (error) {
res.status(500).json(error);
}
});
Below is the json format of [data, amount] Here, data id corresponds amount _id and amount totalAmount is what should be shown for sponsor.amount and sponsor.totalAmount in frontend is what should be the sum of all amounts of its children
[
[
{
"_id": "67caa8142b8e8b77b654f8a3",
"sponsor_id": -1,
"id": 1,
"name": "Raj"
},
{
"_id": "67cab8c6fd720cf98ab076b3",
"sponsor_id": 1,
"id": 2,
"name": "Ali",
"createdAt": "2025-03-07T09:13:42.570Z",
"updatedAt": "2025-03-07T09:13:42.570Z",
"__v": 0
},
{
"_id": "67cab909fd720cf98ab076b5",
"sponsor_id": 2,
"id": 3,
"name": "Riya",
"createdAt": "2025-03-07T09:14:49.888Z",
"updatedAt": "2025-03-07T09:14:49.888Z",
"__v": 0
},
{
"_id": "67cab94afd720cf98ab076b7",
"sponsor_id": 3,
"id": 4,
"name": "Piya",
"createdAt": "2025-03-07T09:15:54.239Z",
"updatedAt": "2025-03-07T09:15:54.239Z",
"__v": 0
},
{
"_id": "67cab958fd720cf98ab076b9",
"sponsor_id": 4,
"id": 5,
"name": "Sana",
"createdAt": "2025-03-07T09:16:08.782Z",
"updatedAt": "2025-03-07T09:16:08.782Z",
"__v": 0
},
{
"_id": "67cab963fd720cf98ab076bb",
"sponsor_id": 5,
"id": 6,
"name": "Dani",
"createdAt": "2025-03-07T09:16:19.290Z",
"updatedAt": "2025-03-07T09:16:19.290Z",
"__v": 0
},
{
"_id": "67cab96dfd720cf98ab076bd",
"sponsor_id": 6,
"id": 7,
"name": "Uri",
"createdAt": "2025-03-07T09:16:29.569Z",
"updatedAt": "2025-03-07T09:16:29.569Z",
"__v": 0
},
{
"_id": "67caba08b5fe93097d767c0f",
"sponsor_id": 3,
"id": 8,
"name": "Lily",
"createdAt": "2025-03-07T09:19:04.331Z",
"updatedAt": "2025-03-07T09:19:04.331Z",
"__v": 0
},
{
"_id": "67cae4d682d0f91204972d62",
"sponsor_id": 6,
"id": 10,
"name": "Pari",
"createdAt": "2025-03-07T12:21:42.269Z",
"updatedAt": "2025-03-07T12:21:42.269Z",
"__v": 0
},
{
"_id": "67cae91d3aa5b379a3fe8c8c",
"sponsor_id": 6,
"id": 11,
"name": "Lara",
"createdAt": "2025-03-07T12:39:57.814Z",
"updatedAt": "2025-03-07T12:39:57.814Z",
"__v": 0
},
{
"_id": "67ce8e966ae3e25a6a3a6cde",
"sponsor_id": 4,
"id": 9,
"name": "Faliz",
"createdAt": "2025-03-10T07:02:46.896Z",
"updatedAt": "2025-03-10T07:02:46.896Z",
"__v": 0
},
{
"_id": "67ce9783805c7f87d9743983",
"sponsor_id": 2,
"id": 12,
"name": "Daya",
"createdAt": "2025-03-10T07:40:51.458Z",
"updatedAt": "2025-03-10T07:40:51.458Z",
"__v": 0
},
{
"_id": "67ce9955d6777143ce661d99",
"sponsor_id": 2,
"id": 13,
"name": "Navi",
"createdAt": "2025-03-10T07:48:37.775Z",
"updatedAt": "2025-03-10T07:48:37.775Z",
"__v": 0
},
{
"_id": "67ce9dec87d539ba4f03916b",
"sponsor_id": 5,
"id": 14,
"name": "Isha",
"createdAt": "2025-03-10T08:08:12.330Z",
"updatedAt": "2025-03-10T08:08:12.330Z",
"__v": 0
},
{
"_id": "67ce9e2d87d539ba4f039172",
"sponsor_id": 4,
"id": 15,
"name": "Ravi",
"createdAt": "2025-03-10T08:09:17.160Z",
"updatedAt": "2025-03-10T08:09:17.160Z",
"__v": 0
},
{
"_id": "67ce9ea587d539ba4f03917e",
"sponsor_id": 6,
"id": 16,
"name": "Rai",
"createdAt": "2025-03-10T08:11:17.992Z",
"updatedAt": "2025-03-10T08:11:17.992Z",
"__v": 0
},
{
"_id": "67cea95daebde8fa92581fb3",
"sponsor_id": 13,
"id": 17,
"name": "Isha",
"createdAt": "2025-03-10T08:57:01.371Z",
"updatedAt": "2025-03-10T08:57:01.371Z",
"__v": 0
},
{
"_id": "67cea9a3aebde8fa92581fb7",
"sponsor_id": 15,
"id": 18,
"name": "Harsh",
"createdAt": "2025-03-10T08:58:11.272Z",
"updatedAt": "2025-03-10T08:58:11.272Z",
"__v": 0
},
{
"_id": "67ceaa3faebde8fa92581fba",
"sponsor_id": 13,
"id": 19,
"name": "Jay",
"createdAt": "2025-03-10T09:00:47.578Z",
"updatedAt": "2025-03-10T09:00:47.578Z",
"__v": 0
},
{
"_id": "67ceaa75aebde8fa92581fc1",
"sponsor_id": 18,
"id": 20,
"name": "Jake",
"createdAt": "2025-03-10T09:01:41.900Z",
"updatedAt": "2025-03-10T09:01:41.900Z",
"__v": 0
},
{
"_id": "67ceb1d24fd3bf80b72d84e7",
"sponsor_id": 6,
"id": 21,
"name": "abv",
"createdAt": "2025-03-10T09:33:06.983Z",
"updatedAt": "2025-03-10T09:33:06.983Z",
"__v": 0
},
{
"_id": "67cebe105b9e6efa0dadbc88",
"sponsor_id": 12,
"id": 22,
"name": "Goli",
"createdAt": "2025-03-10T10:25:20.968Z",
"updatedAt": "2025-03-10T10:25:20.968Z",
"__v": 0
},
{
"_id": "67d12ce9a6c9160098726b07",
"sponsor_id": 5,
"id": 23,
"name": "Jass",
"createdAt": "2025-03-12T06:42:49.386Z",
"updatedAt": "2025-03-12T06:42:49.386Z",
"__v": 0
}
],
[
{
"_id": 10,
"totalAmount": 1480
},
{
"_id": 20,
"totalAmount": 300
},
{
"_id": 8,
"totalAmount": 100
},
{
"_id": 21,
"totalAmount": 3000
},
{
"_id": 5,
"totalAmount": 900
},
{
"_id": 16,
"totalAmount": 1300
},
{
"_id": 3,
"totalAmount": 1850
},
{
"_id": 14,
"totalAmount": 10000
},
{
"_id": 9,
"totalAmount": 140
},
{
"_id": 23,
"totalAmount": 234
},
{
"_id": 18,
"totalAmount": 890
},
{
"_id": 4,
"totalAmount": 300
},
{
"_id": 6,
"totalAmount": 9870
},
{
"_id": 2,
"totalAmount": 500
},
{
"_id": 17,
"totalAmount": 100
},
{
"_id": 19,
"totalAmount": 8900
},
{
"_id": 11,
"totalAmount": 6540
},
{
"_id": 15,
"totalAmount": 1000
},
{
"_id": 1,
"totalAmount": 500
},
{
"_id": 12,
"totalAmount": 3158
},
{
"_id": 13,
"totalAmount": 7865
},
{
"_id": 7,
"totalAmount": 6100
},
{
"_id": 22,
"totalAmount": 7655
}
]
]
