How to create new item in collection if not exists, otherwise, update price and quantity when added to cart

user_14229750 0
Viewed 29

Hi iam new to Vue and trying too build a MEVN application. What iam trying to do is when user adds item in cart it should store one document in mongoDB and if user adds more of same item only the price and quantity for the document should increase and not create new document.

Here is code for client when user adds item in cart,iam using Vue3:

async addToCart(state, product) {
      
      console.log(state);
      let dbProducts = await axios
        .get(`http://localhost:1337/items/`)
        .then((res) => res.data)
        .catch((error) => console.log(error));
    
    
      let item = dbProducts.find((i) => i.id === product.id);
      console.log(item);
      console.log('addTOcart');
      if (item) {
        console.log('put request');
        
        item.quantity++;
        console.log('quantity', item.quantity);
        axios
          //.put(`http://localhost:1337/items/${uniqueId}`, item)
          .put(`http://localhost:1337/items/`, item)
          .then((res) => {
            console.log(res.data);
            alert(res.data);
          })
          .catch((error) => console.log(error));
      } else {
        product = { ...product, quantity: 1 };
        state.cart.push(product);
        axios.post('http://localhost:1337/items', {
          id: product.id,
          title: product.title,
          price: product.price,
          quantity: product.quantity,
          shortDesc: product.shortDesc,
          category: product.category,
          longDesc: product.longDesc,
          imgFile: product.imgFile,
          serial: product.serial,
        });
      }
     
    },

And here is code for the server, iam using express js:

const express = require('express');
const app = express();
const Items = require('./Items');
const connection = require('./connection');
const Port = process.env.Port || 1337;
const cors = require('cors');

app.use(cors());
connection();

app.use(express.json());

app.post('/items', (req, res) => {
  const data = new Items(req.body);
  data
    .save()
    .then((Items) => {
      console.log('item saved', Items);
      res.json({ succcess: true, Items });
    })
    .catch((err) => {
      console.log(err);
    });
});

app.get('/items', async (req, res) => {
  Items.find({}, (err, items) => {
    res.json(items);
  });
});

app.put('/items', function (req, res) {
  console.log(req.body);
  //Items.updateOne({ _id: req.body._id }, req.body);
  Items.findOneAndUpdate({ _id: req.body._id }, req.body);
  // Items.findOne({ _id: req.body._id });
});

app.listen(Port, () => {
  console.log(`App running on port ${Port}`);
});

vuejs3 express mongodb
1 Answers

As @HeikoTheißen suggested, you should handle the logic of the operation on the server, using a single POST request:

const express = require('express');
const app = express();
const Items = require('./Items');
const connection = require('./connection');
const Port = process.env.Port || 1337;
const cors = require('cors');

app.use(cors());
connection();

app.use(express.json());

app.post('/items', async (req, res) => {
  try {
    let item = await Items.findById(req.body.id);
    if (!item) {
      item = await Items.create(req.body);
    } else {
      item.quantity++;
      await item.save();
    }
    res.json({ succcess: true, item });
  } catch (err) {
    res.json({ succcess: false });
  }
});

app.listen(Port, () => {
  console.log(`App running on port ${Port}`);
});

You should simplify your client code as:

async function addToCart(state, product) {
  try {
    const { data } = await axios.post('http://localhost:1337/items', product);

    // Add new product to card if necessary
    if (!state.cart.some((p) => p.id === data.item.id)) {
      state.cart.push(data.item);
    }
  } catch (err) {
    console.log(err);
  }
}
user_132112630
Related