Replacing object id with coresponding name from other object - mysql

Question

Im very new to angular so ill try to describe the problem as cleary as i can.
Im tring to make and single page app with some information about trading between people. AS for backend im using MySQL database + nodejs as a backed server and angular as frontend.
The problem is i have a person table with ID and a Name, Balance for each person.
Then i have a table where i store all the transactions between the people ( Id, Giver ID , Taker ID , Amount ).
At the frontend when i get the information about the transactions i get IDS of the giver and taker, but i want to replace them with the coresponding name from persons table / object.
I have clearly no idea how to manag this. I thought about looping trought the transactions objects and replace each ID in the array with a name.
Something like in this post
The Transaction object:
[Object]0: id: 1 giver_id: 1 taker_id: 5 amount: 50
Persons object:
[Object]0: balance:"-50" id:1 name:"Edgars"[Object]1: balance:"0" id:2 name:"Jānis"
So i want to replace the giver_id 1 with the name Edgars because as FK for giver id maches the persons id.
I dont want a clear answear but atleast a way to dig in.

Answer 1

My suggestion would be to handle the join between the two tables on the server side.
The UI will make one webservice call to get the transactions. The response should be an array of transactions and each transaction object should have the name of the giver and the taker.
You will need a SQL query to join the two tables. A simple join SQL would look like this.
select t.id as TRANS_ID, gp.name as GIVER, tp.name as TAKER, t.amount
from transaction t
join person gp on t.giver_id = gp.id
join person tp on t.taker_id = tp.id;
The JSON response to the UI would look like this:
[
{
"trans_id": 1,
"giver_name": "James",
"taker_name": "Michael",
"amount": 50
},
{
"trans_id": 2,
"giver_name": "Jim",
"taker_name": "Mike",
"amount": 100
}
]
This way, all of your logic would be on the server side and your UI only has to display the data.

Answer 2

You could map a new list from both lists:
var newList = transactionsList.map(function(t) {
var giver,taker;
giver = personList.find(function(p) {
return p.id == t.giver_id;
});
taker = personList.find(function(p) {
return p.id == t.taker_id;
});
if(giver && taker) {
t.giver_name = giver.name;
t.taker_name = taker.name;
return t;
}
else {
return undefined;
}
});
Or if you only need to this on one object:
function transformTransaction(t) {
var giver,taker;
var newTransaction = angular.copy(t);
giver = personList.find(function(p) {
return p.id == t.giver_id;
});
taker = personList.find(function(p) {
return p.id == t.taker_id;
});
if( giver && taker ) {
newTransaction.giver_name = giver.name;
newTransaction.taker_name = taker.name;
return newTransaction;
}
else {
return undefined;
}
}