How to post a javascript array to MongoDB from react app?

Question

I'm a beginner learning more about react and mongoDB and I'm having some trouble communicating between the two. I've been following a tutorial on Medium on using the Plaid API to grab historical transaction data from users (here's the tutorial codebase used). While the users bank accounts and user profile information is stored in the mongoDB backend, the transaction data is not. Instead, an API call is made each time a user lands on certain page and the transaction data is turned into an array which is shown in a data table on the front end to the user.

This is found on line 56 of the Accounts.js file in the tutorial codebase linked above (file located in this dir: client\src\components\dashboard)

// Setting up data table
    const transactionsColumns = [
      { title: "Account", field: "account" },
      { title: "Date", field: "date", type: "date", defaultSort: "desc" },
      { title: "Name", field: "name" },
      { title: "Amount", field: "amount" },
      { title: "Category", field: "category" }
    ];
let transactionsData = [];
    transactions.forEach(function(account) {
      account.transactions.forEach(function(transaction) {
        transactionsData.push({
          account: account.accountName,
          date: transaction.date,
          category: transaction.category[0],
          name: transaction.name,
          amount: transaction.amount
        });
      });
    });

What I would like to do instead is post this array to the mongoDB I have connected- otherwise I would never be able to see any of the transaction data that a user pulls in. What I think I should do to accomplish this is create a new js file in models called Transactions.js. Currently in the models folder (in parent dir) there is an Account.js file and a User.js file which set up the schema for each of these respective datasets. I'm thinking Transactions.js would look like this (which would line up with the array format posted above):

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const TransactionSchema = new Schema({
  userId: {
    type: Schema.Types.ObjectId, // how we associate each transaction with a user
    ref: "users"
  },
  accessToken: {
    type: String,
    required: true
  },
  itemId: {
    type: String,
    required: true
  },
  account: {
    type: String
  },
  date: {
    type: Date
  },
  name: {
    type: String
  },
  amount: {
    type: String
  },
  category: {
    type: String
  },
});

module.exports = Transaction = mongoose.model("transaction", TransactionSchema);

But from there I am unsure to proceed on how to post the transactionsData array into this schema. Ideally, I would like it to post each time a user hits the API and only add items to the TransactionSchema if they don't already exist.

A related question I have is what is the most efficient way to render specific data to a user on the front end when calling data from mongoDB? For example, the same Accounts.js file referenced above contains this on line 76:

<b>Welcome, {user.name.split(" ")[0]}</b>

What this does is it grabs the users full name that was entered during sign up and then converts it to first name. It seems to me that this is referencing the User.js file that is in models and the queries the name field. When i change this to another field that is in User.js however (such as email) and use the same code convention {user.email} I do not see any results come through.

Thank you for the help!

Answer 1

you can do something like this

let Transaction = require("./model/Transaction.js") // whatever file your transaction schema is stored in


// do this is in the same place you create the transactionData from the transactionData array
transactionData.foreach(async data => {
    const newTransaction = new Transaction(data)
    await newTransaction.save()
})

this will create a new Instance of the Transaction schema for every transaction in your transactionData array and save it the database