Data being modified during axios.get request - node.js

Question

I am currently on a React project and the data being sent from the backend is being modified as it arrives on the frontend. I'm probably missing something really stupid but I cannot figure out where it's going bad for god's sake.
The frontend component
import React from 'react';
//.. import bunch of other things
const styles = theme => ({
root: {},
sectionTitle: {
margin: '20px 0 35px 0'
},
sectionTitleNoTop: {
margin: '0 0 35px 0'
},
gap50: {
margin: 50
}
});
class RankingsPage extends React.Component {
state = {
tableData: null,
tableDataEarnings: null,
barData: null,
barDataEarnings: null,
tableError: ''
};
constructor(props) {
super(props);
this.getBarData = this.getBarData.bind(this);
}
componentWillMount() {
this.getBarData(false); //first request
this.getBarData(true); //second request
}
async getBarData(earnings) {
let response = await axios.get(`/api/ranking/ranking_barchart?earnings=${earnings}`);
let {success, data, error} = response.data;
console.log(earnings);
console.log(data);
//The first request works fine. retrieves following
//[ { fill: true,
// backgroundColor: 'rgba(58, 79, 212, 0.4)',
// data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
// { fill: true,
// backgroundColor: 'rgba(239, 49, 81, 0.4)',
// data: [ 0, 0, 0, 0, 10, 0, 15, 6, 10, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0 ] } ]
//Second request gives this
//[ { fill: true,
// backgroundColor: 'rgba(58, 79, 212, 0.4)',
// data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
// { fill: true,
// backgroundColor: 'rgba(239, 49, 81, 0.4)',
// data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] } ]
//Notice that this part is different from the first
if (!success) {
return this.setState({barDataError: error});
}
if (!earnings) {
return this.setState({barData: data});
}
this.setState({barDataEarnings: data});
}
render() {
const {classes} = this.props;
const {tableData, tableDataEarnings, barData, barDataEarnings} = this.state;
return (
<div className={classes.root}>
//I'm using this.state.barData and this.state.barDataEarnings here - I don't think this code has anything to do with the problem but if you need it I'll provide
</div>
);
}
}
export default withStyles(styles)(RankingsPage)
The component makes EXACTLY the same request except that the query value is different in the url. However, the data of the second index object is different to that of the first response.
Now the more interesting thing is the backend.
app.get('/api/ranking/ranking_barchart', authorize, async (req, res) => {
try{
let earnings = req.query.earnings === 'true';
// let sortBy = earnings ? {totalReceived: -1} : {totalDonated: -1};
let sortBy = {totalReceived: -1};
let topUsersResult =
await User.find({})
.sort(sortBy)
.limit(20)
.lean()
.exec();
let returnBody = {
labels: [],
datasets: []
};
let donationsMade = {
fill: true,
backgroundColor:'rgba(239, 49, 81, 0.4)',
data: []
};
let donationsReceived = {
fill: true,
backgroundColor:'rgba(58, 79, 212, 0.4)',
data: []
};
for(let i = 0; i< topUsersResult.length; i++) {
let curResult = topUsersResult[i];
returnBody.labels.push(curResult.username);
donationsMade.data.push(
curResult.totalDonated ? curResult.totalDonated : 0
);
donationsReceived.data.push(
curResult.totalReceived ? curResult.totalReceived : 0
);
}
returnBody.datasets.push(donationsReceived);
returnBody.datasets.push(donationsMade);
console.log(returnBody.datasets); //Print here is EXACTLY the same for both requests as expected
res.json(API_MSG.successMsg(returnBody));
}catch(e){
res.json(API_MSG.errorMsg(e, MSG_TYPES.FIND_ERROR, true));
}
});
I have it to NOT use the earnings query to test out with the EXACT same response. The code above is almost unnecessary because the console.log value is exactly the same as shown below. The console.log commented on the code above prints the following
//First Request
[ { fill: true,
backgroundColor: 'rgba(58, 79, 212, 0.4)',
data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
{ fill: true,
backgroundColor: 'rgba(239, 49, 81, 0.4)',
data: [ 0, 0, 0, 0, 10, 0, 15, 6, 10, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0 ] } ]
//Second Request
[ { fill: true,
backgroundColor: 'rgba(58, 79, 212, 0.4)',
data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
{ fill: true,
backgroundColor: 'rgba(239, 49, 81, 0.4)',
data: [ 0, 0, 0, 0, 10, 0, 15, 6, 10, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0 ] } ]
PLEASE tell me I'm not crazy. How is the EXACT same response that is being returned from the server some how being modified while it's being transported to the frontend???