Mongoose CastError: Cast to ObjectId failed for value “undefined” at path “_id” for model “Post”

0
votes

I am working on a MEAN stack project where a user can add a post, edit and delete them. But after performing the methods required, the posts are not getting deleted and I face an error. I am new to MEAN stack.

posts.service.ts

getPosts() {
 this.http.get<{ message: string, posts: any }>('http://localhost:3300/api/posts')
 .pipe(
   map((postData) => {
     return postData.posts.map(post=>{
       return{
      title: post.title,
      content: post.content,
      id: post._id
    }
     })
    }))
  .subscribe((transformedPosts)=>{
  this.posts = transformedPosts; 
  this.postsUpdated.next([...this.posts])  //updating the posts so that it is available to the rest of the app
   })
  }
getUpdatedPostsListener(){
   return this.postsUpdated.asObservable()
}
  
addPosts(id: any, title: string, content: string) {
  const post: PostModel = {
    id: id,
    title: title,
    content: content
  }
  this.http.post<{ message: string }>('http://localhost:3300/api/posts', post).subscribe((responseData)=>{
    console.log(responseData.message);
  })
  this.posts.push(post);
  this.postsUpdated.next([...this.posts]);
}

deletePosts(postId: string){
  this.http.delete('http://localhost:3300/api/posts/' + postId)
  .subscribe(()=>{
    const updatedPosts = this.posts.filter(post => post.id! == postId);
    this.posts = updatedPosts;
    this.postsUpdated.next([...this.posts]);
  })
}

app.js

  app.delete('/api/posts/:id', (req, res, next) => {
   Post.deleteOne({ _id: req.params.id }).then(result => {
       console.log(result);
       res.status(200).json({
           message: 'Post deleted successfully!'
       })
   })
   .catch(err => {
       console.log('error: ', err);
   })
    
})

posts.components.ts

    onDelete(postId: string){
    this.postsService.deletePosts(postId);
  }

posts.component.html

 <mat-action-row>
                <button color="primary" mat-raised-button>Edit</button>
                <button color="warn" mat-raised-button (click)="onDelete(post.id)">Delete</button>
            </mat-action-row>

post-models.js (for the backend)

  const mongoose = require('mongoose');

const postSchema = mongoose.Schema({
    title: { type: String, required: true },
    content: { type: String, required: true }
})


module.exports = mongoose.model('Post', postSchema)

This is the error that I face everytime I try to delete any post:-

error: CastError: Cast to ObjectId failed for value "undefined" at path "_id" for model "Post" at model.Query.exec (E:\Angular\KUSpace\node_modules\mongoose\lib\query.js:4358:21) at model.Query.Query.then (E:\Angular\KUSpace\node_modules\mongoose\lib\query.js:4452:15) at E:\Angular\KUSpace\backend\app.js:48:43 at Layer.handle [as handle_request] (E:\Angular\KUSpace\node_modules\express\lib\router\layer.js:95:5) at next (E:\Angular\KUSpace\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (E:\Angular\KUSpace\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (E:\Angular\KUSpace\node_modules\express\lib\router\layer.js:95:5) at E:\Angular\KUSpace\node_modules\express\lib\router\index.js:281:22 at param (E:\Angular\KUSpace\node_modules\express\lib\router\index.js:354:14) at param (E:\Angular\KUSpace\node_modules\express\lib\router\index.js:365:14) at Function.process_params (E:\Angular\KUSpace\node_modules\express\lib\router\index.js:410:3) at next (E:\Angular\KUSpace\node_modules\express\lib\router\index.js:275:10)
at E:\Angular\KUSpace\backend\app.js:22:5 at Layer.handle [as handle_request] (E:\Angular\KUSpace\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (E:\Angular\KUSpace\node_modules\express\lib\router\index.js:317:13) at E:\Angular\KUSpace\node_modules\express\lib\router\index.js:284:7 {
messageFormat: undefined, stringValue: '"undefined"', kind: 'ObjectId', value: 'undefined', path: '_id', reason: Error: Argument passed in must be a single String of 12 bytes or a string of 24 hex characters at new ObjectID (E:\Angular\KUSpace\node_modules\bson\lib\bson\objectid.js:59:11) at castObjectId (E:\Angular\KUSpace\node_modules\mongoose\lib\cast\objectid.js:25:12) at ObjectId.cast (E:\Angular\KUSpace\node_modules\mongoose\lib\schema\objectid.js:279:12) at ObjectId.SchemaType.applySetters (E:\Angular\KUSpace\node_modules\mongoose\lib\schematype.js:1088:12) at ObjectId.SchemaType._castForQuery (E:\Angular\KUSpace\node_modules\mongoose\lib\schematype.js:1523:15) at ObjectId.SchemaType.castForQuery (E:\Angular\KUSpace\node_modules\mongoose\lib\schematype.js:1513:15) at ObjectId.SchemaType.castForQueryWrapper (E:\Angular\KUSpace\node_modules\mongoose\lib\schematype.js:1490:20) at cast (E:\Angular\KUSpace\node_modules\mongoose\lib\cast.js:331:32)
at model.Query.Query.cast (E:\Angular\KUSpace\node_modules\mongoose\lib\query.js:4763:12) at model.Query.Query._castConditions (E:\Angular\KUSpace\node_modules\mongoose\lib\query.js:1841:10) at model.Query. (E:\Angular\KUSpace\node_modules\mongoose\lib\query.js:2722:8) at model.Query._wrappedThunk [as _deleteOne] (E:\Angular\KUSpace\node_modules\mongoose\lib\helpers\query\wrapThunk.js:16:8) at E:\Angular\KUSpace\node_modules\kareem\index.js:370:33 at processTicksAndRejections (internal/process/task_queues.js:75:11) }

2
node.jsangularmongodbmongoosemean-stack
Have you checked the called url in the browser inspectors network tab. Does it have the correct id in the path? – Fussel
Request URL: localhost:3300/api/posts/null This is what it shows when I click on the delete button – R P
Ok, so the issue is in your frontend code. How does the object structure look like when logging it to the console in your angular code. – Fussel

2 Answers

1
votes

Short answer:

If you don't want to deal with ObjectId and the transformations between ObjectId and String, and between id and _id.

You could use _id field backend and frontend. Also, to save it in the backend as a String add the following line to your schema:

_id: { type: String, required: true }

And now when you create a new post you make it like this:

  const post: PostModel = {
     _id: _id,
     title: title,
     content: content
   }

Then you could use bson to generate new ObjectId to pass it to the backend.

import { ObjectID } from 'bson';

{ _id: new ObjectID().toHexString() }
0
votes

After changing the AddPosts method in the post.service.ts, the issue was solved

post.service.ts

addPosts(title: string, content: string) {
  const post: PostModel = {
    id: null,
    title: title,
    content: content
  }
  this.http.post<{ message: string , postId: string }>('http://localhost:3300/api/posts', post).subscribe((responseData)=>{
    console.log(responseData.message);
    post.id = responseData.postId;
    this.posts.push(post);
  this.postsUpdated.next([...this.posts]);

  })
  
}