How can we determine the remaining balance in the user's wallet after making purchases using JavaScript?

Question

How can we determine the remaining balance in the user's wallet after making purchases using JavaScript?

There are three arrays containing data from the back-end, with unknown names or products. The task is to calculate the total amount spent by the user and how much money is left in their wallet. In case the user runs out of money, they can take a loan which will be added to their wallet.

I attempted to solve this using multiple loops to iterate through each array and compare values, but I require a solution with algorithmic complexity On.

    var product = [
    {'name':'cookie', 'price':10},
    {'name':'coffee', 'price':2},
    {'name':'ice cream', 'price':4},
    {'name':'pasta', 'price':5},
    {'name':'peach', 'price':6},
    {'name':'pineapple', 'price':15},
]
var purse = [
    {'name':'Katya', 'cash':100},
    {'name':'Danya', 'cash':200},
    {'name':'Vanya', 'cash':400},
    {'name':'Sanya', 'cash':500},
    {'name':'Manya', 'cash':600},
    {'name':'Kira', 'cash':150},
]

var purchases = [
    {'name':'Katya', 'item':'cookie'},
    {'name':'Danya', 'item':'pasta'},
    {'name':'Danya', 'item':'coffee'},
    {'name':'Danya', 'item':'coffee'},
    {'name':'Manya', 'item':'pineapple'},
    {'name':'Katya', 'item':'ice cream','credit': 20},
]

javascript ajax api

Answer 1

Answer №1

Perhaps we could try a different approach. Instead of consolidating all the information into one set of objects, I opted to re-fetch the data on each loop iteration. This decision should make formatting easier. Hopefully, this solution serves as a good foundation for your needs!

var product = [
    {'name':'cookie', 'price':10},
    {'name':'coffee', 'price':2},
    {'name':'ice cream', 'price':4},
    {'name':'pasta', 'price':5},
    {'name':'peach', 'price':6},
    {'name':'pineapple', 'price':15},
];
var purse = [
    {'name':'Kate', 'cash':100},
    {'name':'Danny', 'cash':200},
    {'name':'Vanya', 'cash':400},
    {'name':'Sanya', 'cash':500},
    {'name':'Manya', 'cash':600},
    {'name':'Kira', 'cash':150},
];
var purchases = [
    {'name':'Kate', 'item':'cookie'},
    {'name':'Danny', 'item':'pasta'},
    {'name':'Danny', 'item':'coffee'},
    {'name':'Danny', 'item':'coffee'},
    {'name':'Manya', 'item':'pineapple'},
    {'name':'Kate', 'item':'ice cream','credit': 20},
];

function displayInfo(name, walletVal) {
  const displayArea = document.querySelector("#display");
  const spendSummary = document.createElement("div");
  spendSummary.classList.add("spendSummary");
  const nameEle = document.createElement("div");
  nameEle.classList.add("name");
  nameEle.innerText = name;
  spendSummary.appendChild(nameEle);
  const walletEle = document.createElement("div");
  walletEle.classList.add("wallet");
  walletEle.innerText = walletVal;
  spendSummary.appendChild(walletEle);
  displayArea.appendChild(spendSummary);
}

const names = [...new Set(purchases.map(e => e.name))];
for (const name of names) {
  const filteredPurchases = purchases.filter(e => e.name == name);
  const costs = filteredPurchases.map(
    ({item: itemName}) =>
    product.find(item => item.name == itemName).price
  );
  const creditsArr = filteredPurchases.filter(e => e.credit)
    .map(e => e.credit);
  const totalCredit = creditsArr.reduce((a,b) => a + b, 0);
  const totalCost = costs.reduce((a,b) => a + b, 0);
  const cash = purse.find(e => e.name == name).cash;
  const currentWallet = cash + totalCredit - totalCost;
  displayInfo(name, currentWallet);
}

#display {
  display: flex;
  justify-content: space-around;
  
  font-family: arial;
}

.spendSummary {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.name {
  box-shadow: 0 2px 2px -2px black;
}

<div id="display">
</div>

Answer 2

Perhaps we could try a different approach. Instead of consolidating all the information into one set of objects, I opted to re-fetch the data on each loop iteration. This decision should make formatting easier. Hopefully, this solution serves as a good foundation for your needs!

var product = [
    {'name':'cookie', 'price':10},
    {'name':'coffee', 'price':2},
    {'name':'ice cream', 'price':4},
    {'name':'pasta', 'price':5},
    {'name':'peach', 'price':6},
    {'name':'pineapple', 'price':15},
];
var purse = [
    {'name':'Kate', 'cash':100},
    {'name':'Danny', 'cash':200},
    {'name':'Vanya', 'cash':400},
    {'name':'Sanya', 'cash':500},
    {'name':'Manya', 'cash':600},
    {'name':'Kira', 'cash':150},
];
var purchases = [
    {'name':'Kate', 'item':'cookie'},
    {'name':'Danny', 'item':'pasta'},
    {'name':'Danny', 'item':'coffee'},
    {'name':'Danny', 'item':'coffee'},
    {'name':'Manya', 'item':'pineapple'},
    {'name':'Kate', 'item':'ice cream','credit': 20},
];

function displayInfo(name, walletVal) {
  const displayArea = document.querySelector("#display");
  const spendSummary = document.createElement("div");
  spendSummary.classList.add("spendSummary");
  const nameEle = document.createElement("div");
  nameEle.classList.add("name");
  nameEle.innerText = name;
  spendSummary.appendChild(nameEle);
  const walletEle = document.createElement("div");
  walletEle.classList.add("wallet");
  walletEle.innerText = walletVal;
  spendSummary.appendChild(walletEle);
  displayArea.appendChild(spendSummary);
}

const names = [...new Set(purchases.map(e => e.name))];
for (const name of names) {
  const filteredPurchases = purchases.filter(e => e.name == name);
  const costs = filteredPurchases.map(
    ({item: itemName}) =>
    product.find(item => item.name == itemName).price
  );
  const creditsArr = filteredPurchases.filter(e => e.credit)
    .map(e => e.credit);
  const totalCredit = creditsArr.reduce((a,b) => a + b, 0);
  const totalCost = costs.reduce((a,b) => a + b, 0);
  const cash = purse.find(e => e.name == name).cash;
  const currentWallet = cash + totalCredit - totalCost;
  displayInfo(name, currentWallet);
}

#display {
  display: flex;
  justify-content: space-around;
  
  font-family: arial;
}

.spendSummary {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.name {
  box-shadow: 0 2px 2px -2px black;
}

<div id="display">
</div>

How can we determine the remaining balance in the user's wallet after making purchases using JavaScript?

Answer №1

Similar questions

Handling events for components that receive props from various components in a list

Encountering an error while trying to run a Next.js application on Linux Mint

Displaying random divs and subsequently animating them downwards using JavaScript

Error Message for Sequelize Validation Fails to Appear as Expected

Display one of two divs after clicking a button depending on the input from a form field

Leverage a single JavaScript file across all Vue components without the need for individual imports

When attempting to execute a function within another function in JavaScript, a ReferenceError is triggered

Utilize PHP to extract JSON data from the db-ip.com API

Is there a way to verify the availability of an authenticated resource without triggering a pop-up for credentials in the browser?

Guide to using JavaScript to populate the dropdown list in ASP

What is the best way to utilize jquery's $.ajax function in conjunction with json and php to upload a file?

Upon attempting to fetch input by name, Puppeteer reported the error message: 'Node is not clickable or not an HTMLElement'

Troubleshooting Vue.js 2: Difficulty with Vue locating files stored in the /assets directory (v-for loop)

Using Javascript to generate a button that randomly chooses links within the webpage

Ways to iterate through a JSON object within an array to extract specific data field

Listening for select elements that have remained unchanged

Retrieve the keys stored within a complex array of objects

Issue with React component not displaying in the browser.Here are some

What's the best way to trigger an alert popup after calling another function?

Setting the property of an object member using an array member within a JavaScript singleton