如何从前端 React 以编程方式添加到数据库中的数组

Question

I basically have this route

app.post("/order/:orderId/:productId", async (req, res) => {
  const result = await Order.findByIdAndUpdate(
    req.params.orderId,
    {
      $push: {
        products: req.params.productId
      }
    },
    { new: true }
  );
  res.send(result);
});

I have two collections, namely Product and Orders. The goal is to get, for instance, a particular Order with id(5ddfc649e1e9e31220ce6a16) , and post a product with id(5de02c4a0ed3160368b9a550) inside an Array field inside this Orders collection. In Postman, I can do that manually by just adding the ObjectIds in the URL like so:

Http://localhost:3000/orders/5ddfc649e1e9e31220ce6a16/5de02c4a0ed3160368b9a550.

and I get this Response :

{
    "products": [
        "5ddfb388b14c5b41e0607a5e",
        "5de02c4a0ed3160368b9a550" // newly added Product


    ],
    "_id": "5ddfc649e1e9e31220ce6a16",
    "issuedBy": "issuedBy",
    "collectedBy": "collectedBy",
    "quantity": 123,
    "createdAt": "2019-11-28T11:48:40.500Z",
    "updatedAt": "2019-11-28T11:59:51.659Z",
    "__v": 0
}

My challenge is, how do I do this programmatically from the UI(Reactjs) side?

// Product Schema

const mongoose = require("mongoose");

const ProductSchema = new mongoose.Schema(
  {
    name: String,
    description: String,
    price: Number,
    quantity: Number,
    supplier: String
  },
  { timestamps: true }
);

module.exports = mongoose.model("Product", ProductSchema);

// Orders Schema

const mongoose = require("mongoose");

const OrderSchema = new mongoose.Schema(
  {
    issuedBy: String,
    collectedBy: String,
    quantity: Number,
    products: [
      {
        type: mongoose.Schema.Types.ObjectId,
        ref: "Product",
        required: true
      }
    ]
  },
  { timestamps: true }
);

module.exports = mongoose.model("Order", OrderSchema);

I would really appreciate any suggestion or a sample code snippet

Answer 1

I think what you are looking for is, you need to hit this API from your front end ie React app.

http://localhost:3000/orders/<order-id-here>/<product-id-here>

And then supply the dynamic value for your order id and product id.

You can hit api using fetch. More info

You can simply take some variables in your front end app. As I don't know how your order id and product id are being generated so you need to check on that and then something like,

let orderId = someValue
let productId = someOtherValue
let url = "http://localhost:3000/orders/"+orderId+"/"+productId

But I think the concern would be GET and POST method. Right now you have app.post but the params are in URL so instead you should go for GET method ie app.get