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

AgGrid supports multi-line content within its cells

The argument type does not match the parameter type partial<>

Cross-Origin Request Sharing (CORS) problem encountered while making an API call with

"Exploring the incredible powers of Ionic2, Angular2, HTTP requests, and

Cannot get the before-leave transition JavaScript hook to function properly in Vue.js

The delete button in the "Chip" component of React Material-UI is not functioning as expected

Discovering the total number of tickets based on priority in an array with Javascript

"Utilizing Node.js to access modules with their absolute

The issue persists with setState not functioning correctly and the checkboxes for filtering not registering as checked

Prevent opening links in new tabs or using control/middle click for specific links?

Submit a POST request using CoffeeScript to get a string from the returned object

Retrieve the value of a JSON array containing only a single object using jQuery

Could someone assist me with understanding how to use the Load function in JQuery?

Error message: Unable to access the state property of an undefined object

Should we consider the implementation of private methods in Javascript to be beneficial?

If you want to retrieve the calculated value of a div using jQuery

Trapped in the clutches of the 'Access-Control-Allow-Origin' snag in our Node.js application

Manipulating CSS Class Properties Using JavaScript

Combining PHP Variable with URL String

Can you explain the significance of "javascript:void(0)"?