Mobile App & Database Basics

[JeremyNC]

Apologies for the newbie questions, but I'm finding myself at a loss (I don't have current web app development experience). Here's what I'm trying to do:

1. I have a database of transactions for multiple credit card accounts. In it is stored basic details about the transaction such as Account and Amount.

2. I need a mobile app to display summary totals by Account. This display should look something like:

I have a query called getSummary that appears to be fetching and summing things nicely:

SELECT
  account, SUM(amount) as total
FROM
  purchases
WHERE
  paid = FALSE
GROUP BY
  account

The Challenge
Now I want to replace the values in the keyvalue list with the totals pulled from the database. Frankly, I don't know where to start.

Anyone have any pointers on a good way to accomplish this?

Thanks in advance!

[victoria]

Hi @JeremyNC! No apologies necessary

Would this work for you?

{{Object.fromEntries(query2.data.account.map((key, i) => [key, query2.data.total[i]]))}}

Basically, we're looping through each account name and creating an array with subarrays, where each subarray looks like ['Savor', '$233.58']. Then we use the Object.fromEntries method to turn this array with subarrays into an object, since the keyValue pair component accepts an object where each key gets represented in bold on the left and each value gets represented in gray on the right.

[JeremyNC]

This looks like a great solution! I’ll give it a go. I also need to be able to sum the values and display the total. I should be able to figure out how to update the value of that heading field to do that but will let you know if I struggle there too!

Thanks much for the awesome assistance!

[victoria]

For the sum, you should be able to do something like this:

Total: {{_.sum(Object.values(keyValue2.data).map(dollar_amt => Number(dollar_amt.replace(/[$,]+/g,""))))}}

We're using Lodash's _.sum method to add an array of numbers together. We get this array of numbers by using Object.values to extract all the values from the keyValue component, then we map through them to turn each value from a price (e.g. $233.58) to a number (e.g. 233.58) so we can properly sum them. We use Number to turn the string int a number and .replace to remove the $.

Definitely let me know how it goes! And my pleasure

[JeremyNC]

Thank you so much for this! I was able to get the keyValue list to work using your code. I don't fully understand how it's iterating over the values since I don't see any i++ types of references in there, but I'll go with it!

I ended up just requerying the database to get the total to display as I wanted the dollar sign on there. Not the most efficient, I know, since I already have the data in the keyValue object but, done is done.

Thanks again for the assistance...on to the next challenge in this app!

[victoria]

Oh, that's awesome. Very glad to hear it!

It's iterating over the values with a Javascript .map function Pretty nifty, has some "under the hood" i++ things happening.

Let us know how we can help!