javascriptreactjsmongodbfetch-apiobjectid

Can't convert ObjectId to String in JavaScript


Having trouble converting an objectID to a string in react after fetching my API... I can't get this for instance "ObjectId(5e23828631c3f20fd40d3feb)". I just need this "5e23828631c3f20fd40d3feb" Here is my code:

import React, { Component } from 'react'
import jwt_decode from 'jwt-decode'
import ObjectID from 'bson-objectid'

class Profile extends Component {
    constructor() {
        super()
        this.state = {
            full_name: '',
            username: '',
            email: '',
            pubCount: '',
            abmnCount: '',
            abneCount: '',
            errors: {}
        }
        this.loadProfile = this.loadProfile.bind(this)
    }

    loadProfile(){

        const token = localStorage.usertoken
        fetch('http://localhost:9000/kotgram/user/mesinfos', {
            method: 'get',
            headers: new Headers({
                'Authorization': token,
                'Content-Type': 'application/json'
            })
        }).then(res => res.json())
            .then(data => {
                console.log(data._id.toString()) /*this shows [object][object] when I try to convert it to a string. I tried to import bson-objectid but it doesnt work*/
                console.log(data.email)
                this.setState({
                    full_name: data.full_name,
                    username: data.username,
                    email: data.email,
                    pubCount: data.pubCount,
                    abmnCount: data.abmnCount,
                    abneCount: data.abneCount
                })                
            })
            .catch(error => console.log('ERROR'));
    }

    componentDidMount() {
        this.loadProfile()

        
    }

    render() {
        return (
            <div className="container">
                <div className="jumbotron mt-5">
                    <div className="col-sm-8 mx-auto">
                        <h1 className="text-center">PROFILE</h1>
                    </div>
                    <table className="table col-md-6 mx-auto">
                        <tbody>
                        <tr>
                            <td>Nom complet</td>
                            <td>{this.state.full_name}</td>
                        </tr>
                        <tr>
                            <td>Username</td>
                            <td>{this.state.username}</td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td>{this.state.email}</td>
                        </tr>
                        <tr>
                            <td>Publications</td>
                            <td>{this.state.pubCount}</td>
                        </tr>
                        <tr>
                            <td>Abe</td>
                            <td>{this.state.abneCount}</td>
                        </tr>
                        <tr>
                            <td>Abn</td>
                            <td>{this.state.abmnCount}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

export default Profile

I've use Kotlin for my backend Server and MongoDB to store my collections.. Please Help..


Solution

  • I just found a solution: I went back to my backend server and I replace this @Id val _id: ObjectId? with this @Id val _id: String = ObjectId().toHexString() So that I'll only have the value of the objectId as an "hexString" instead of having others parameters like "machineIdentifier" or "processIdentifier"