Search code examples
javascriptnode.jsvue.jspostfetch

Vuejs app simple fetch post only insert the _id and not the json


I have an app with Vue.js and in a method I created a simple fetch to post to my API, but only the _id is saved in my mongodb.

My method in Vuejs app (i created a variable with the json to test my fetch post):

saveAllResults(){
            let myvalue ='{"Step2":[{"selected":!1,"produto":"A70-5","ncm":"9506.62.00","aliqII":.2,"aliqIpi":0,"aliqPis":.021,"aliqCofins":.0965,"descricao":"BOLA DE BASQUETE","pesoUnitario":.43,"unitario":.78,"dumping":0,"cubagemUnitario":0,"quantidade":150,"icmEstadoDestino":0,"mvaAjustado":0,"markup":.12},{"selected":!1,"produto":"PINK-7-103","ncm":"7117.90.00","aliqII":.18,"aliqIpi":.12,"aliqPis":.021,"aliqCofins":.0965,"descricao":"BIJOUTERIAS EM METAL/ VIDRO ","pesoUnitario":.975,"unitario":1.52,"dumping":0,"cubagemUnitario":0,"quantidade":200,"icmEstadoDestino":0,"mvaAjustado":0,"markup":.11},{"selected":!1,"produto":"PINK-7-103","ncm":"7117.90.00","aliqII":.18,"aliqIpi":.12,"aliqPis":.021,"aliqCofins":.0965,"descricao":"BIJOUTERIAS EM METAL/ VIDRO ","pesoUnitario":.975,"unitario":1.52,"dumping":0,"cubagemUnitario":0,"quantidade":300,"icmEstadoDestino":0,"mvaAjustado":0,"markup":.19}],}';
           
            fetch('http://localhost:4242/api/v1/dis', {
                method: 'post',
                body: myvalue
            }).then(function(response){
                return response.json(myvalue);
            }).then(function(text){
                console.log(text);
            }).catch(function (error){
                console.error(error);
            })
            
}

my route in my API (I'm using express, morgan, joi, helmet, cors, bodyParse with mongoDB)

// CREATE  ONE 
router.post('/', async (req, res, next) => {
    try {
        const value = await schema.validateAsync(req.body);
        const inserted = await dis.insert(value);
        res.json(inserted);
    } catch (error) {
        next(error);
    }
}); 

When i try to post the same json data using Isominia (or postman) the post works fine, but with my fecth post request only the _id is generated and don't post all the data that I want.

The Fetch Post return in console:

{_id: "5f376d6edd37760c6632c8ab"}

Solution

  • After totally forgot that you need to specify the headers in your fetch POST request to pass the json to your API and use the method JSON.stringuify to the variable, so, the code passing the headers in my Fetch is:

    saveAllResults(){
                let myvalue =JSON.stringify({"Step2":[{"selected":!1,"produto":"A70-5","ncm":"9506.62.00","aliqII":.2,"aliqIpi":0,"aliqPis":.021,"aliqCofins":.0965,"descricao":"BOLA DE BASQUETE","pesoUnitario":.43,"unitario":.78,"dumping":0,"cubagemUnitario":0,"quantidade":150,"icmEstadoDestino":0,"mvaAjustado":0,"markup":.12},{"selected":!1,"produto":"PINK-7-103","ncm":"7117.90.00","aliqII":.18,"aliqIpi":.12,"aliqPis":.021,"aliqCofins":.0965,"descricao":"BIJOUTERIAS EM METAL/ VIDRO ","pesoUnitario":.975,"unitario":1.52,"dumping":0,"cubagemUnitario":0,"quantidade":200,"icmEstadoDestino":0,"mvaAjustado":0,"markup":.11},{"selected":!1,"produto":"PINK-7-103","ncm":"7117.90.00","aliqII":.18,"aliqIpi":.12,"aliqPis":.021,"aliqCofins":.0965,"descricao":"BIJOUTERIAS EM METAL/ VIDRO ","pesoUnitario":.975,"unitario":1.52,"dumping":0,"cubagemUnitario":0,"quantidade":300,"icmEstadoDestino":0,"mvaAjustado":0,"markup":.19}],});
               
                fetch('http://localhost:4242/api/v1/dis', {
                    method: 'post',
                    headers: {
                        'Content-Type' : 'application/json'
                    },
                    body: myvalue
                }).then(function(response){
                    return response.json(myvalue);
                }).then(function(text){
                    console.log(text);
                }).catch(function (error){
                    console.error(error);
                })
                
    }