Remove object from array with specific index (MongoDB, NodeJS, React) - node.js

Question

I have app with devices-array which have objects
with device_name and device_id. I'd like to remove specific device depending which device user want's to remove from devices array.
I've already tryied to findIndex and indexOf -methods, but it return's undefined for request. How to access device depending which device user want's to remove?
deviceController.js
'use strict'
import Users from '../models/userModel.js'
deleteDevice: async (req, res) => {
try {
const { device } = req.body.device.device_id
const dev = await Users.findOne({ _id: req.user.id }).populate('device')
const devs = dev.device //devices
const index = devs.findIndex(req.body.device)
const devic = devs.slice(index, 1)
await Users.findOneAndUpdate({ _id: req.user.id }, { device: devic })
res.json({ msg: 'Deleted success' })
} catch (err) {
return res.status(500).json({ msg: err.message })
}
}
export { deviceControl }
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import { useSelector, useDispatch } from 'react-redux'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faEdit, faTrash } from '#fortawesome/free-solid-svg-icons'
import { Container, Table } from 'react-bootstrap'
import { showErr, showSuccess } from '../utils/notifications/Notification'
import {
fetchAllUsers,
dispatchGetAllUsers
} from '../../redux/actions/usersAction'
import '../../index.css'
//initialize device
const initialState = {
device: { device_name: '', _id: '', device_id: '' },
err: '',
success: ''
}
function AllDevices() {
//authentication
const auth = useSelector((state) => state.auth)
//token
const token = useSelector((state) => state.token)
//set data
const [data, setData] = useState(initialState)
//users
const users = useSelector((state) => state.users)
const { device_name, device_id, err, success } = data
//loading
const [loading, setLoading] = useState(false)
//authentication
const { user, isAdmin } = auth
const dispatch = useDispatch()
const handleChange = (e) => {
const { name, value } = e.target
setData({ ...data, [name]: value, err: '', success: '' })
}
useEffect(() => {
if (isAdmin) {
fetchAllUsers(token).then((res) => {
dispatch(dispatchGetAllUsers(res))
})
}
if (isAdmin || user) {
setData(initialState)
}
}, [token, user, isAdmin, dispatch, loading])
const updateDeviceName = async () => {
try {
if (window.confirm('Are you sure you want to rename this device?')) {
await axios.patch(
`/device/edit/${data.device._id}/${data.device.device_name}`,
{
device: { device_name, device_id }
},
{
headers: { Authorization: token }
}
)
}
setData({ ...data, err: '', success: 'Updated Success!' })
} catch (err) {
setData({ ...data, err: err.response.data.msg, success: '' })
}
}
const handleUpdate = () => {
if (device_name) updateDeviceName(device_name)
}
const handleDelete = async () => {
try {
if (window.confirm('Are you sure you want to delete this device?')) {
setLoading(true)
await axios.patch(
`/device/delete/${data.device}`,
{ device: data.device },
{
headers: { Authorization: token }
}
)
}
setData({ ...data, err: '', success: 'Updated Success!' })
} catch (err) {
setData({ ...data, err: err.response.data.msg, success: '' })
}
}
return (
<>
<h5 className='m-5'>
{' '}
<Link to='/'>
<i className='fas fa-undo-alt'></i>Takaisin
</Link>
</h5>
<Container fluid='sm'>
<div>
{err && showErr(err)}
{success && showSuccess(success)}
{loading && <h3>Loading.....</h3>}
</div>
<Table bordered hover variant='light' responsive>
<tbody>
<tr>
<th>Nimi</th>
<th>Laite</th>
</tr>
{/* Loop through user details */}
{users.map((p) => (
<tr>
<td>
{p.name}
<br />
{p.email}
</td>
<td>
{p.device.map((d) => (
<div>
<div
className='d-flex-inline'
style={{
position: 'relative',
width: '170px'
}}
>
{' '}
<input
type='text'
style={{
fontSize: '16px',
width: '100px'
}}
defaultValue={d.device_name}
name='device_name'
onChange={handleChange}
/>{' '}
<FontAwesomeIcon
style={{
position: 'absolute',
top: '3px',
right: '70px',
zIndex: '2'
}}
icon={faEdit}
title='Edit'
onClick={() => handleUpdate(d.device_name)}
/>{' '}
</div>
<div
className='d-flex'
style={{
position: 'relative',
width: '100px'
}}
>
<input
type='text'
style={{
fontSize: '14px',
width: '200px',
color: '#333'
}}
defaultValue={d.device_id}
disabled
name='device_id'
/>{' '}
<FontAwesomeIcon
style={{
position: 'absolute',
top: '3px',
right: '3px',
zIndex: '2'
}}
icon={faTrash}
title='Trash'
onClick={() => handleDelete(d.device)}
/>{' '}
</div>
</div>
))}
</td>
</tr>
))}
</tbody>
</Table>
</Container>
</>
)
}
export default AllDevices
const deviceSchema = mongoose.Schema({
device_id: { type: Number, required: true },
device_name: { type: String, required: true }
})
const userSchema = new mongoose.Schema(
{
name: {
type: String,
required: [true, 'Please enter your name!']
},
email: {
type: String,
required: [true, 'Please enter your email!']
},
device: [deviceSchema, { type: mongoose.Schema.Types.ObjectId }],
password: {
type: String,
required: [true, 'Please enter your password!']
},
days: { type: Date },
role: {
type: Number,
default: 0 // 0 = user 1= admin 3=visitor
}
},
{
timestamps: true
}
)
const Users = mongoose.model('User', userSchema)
export default Users
import { deviceControl } from '../controllers/deviceController.js'
import express from 'express'
import auth from '../middleware/auth.js'
import authAdmin from '../middleware/authAdmin.js'
const router = express.Router()
router.get('/device', auth, authAdmin, deviceControl.getUsersAllDevices)
router.post('/device', auth, authAdmin, deviceControl.getUsersAllDevices)
router.patch('/device/delete/:id', auth, authAdmin, deviceControl.deleteDevice)
router.put('/add_device', auth, deviceControl.addDevice)
router.patch('/device/edit', auth, deviceControl.updateDeviceName)
export default router

Answer 1

try using JS filter function.
const removeDevice(devices, id) => {
return devices.filter(device => device.id !== id)
}