empty json when using body-parser bodyParser.json()

Question

I am trying to send a long json as a post request via script in an HTML page like: (the data comes from a textbox and it is a correct array of json)

<script>
        /* UPDATE ORGANIZATION LIST*/
        function updateOrgs () {
            var data = $('#showOrgs').val();

            $.ajax({
                url : "http://localhost:8000/api/updateOrgs",
                type: "POST", // data type (can be get, post, put, delete)
                data : {json:JSON.parse(data)}, // data in json format
                async : false, // enable or disable async (optional, but suggested as false if you need to populate data afterwards)
                success: function(response, textStatus, jqXHR) {
                    alert(response);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown)
                }
            });
        }        
</script>

I have set up my express as:

const express = require('express');
var bodyParser = require('body-parser')
// initialize express
const app = express();

// body-parser
// create application/json parser
var jsonParser = bodyParser.json()
 
// create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({extended: false})

I am using the body-parser in my node express app to read the json in the body such as:

app.post('/api/updateOrgs', jsonParser, (req, res)=> {
    try {
        console.log(req.body);
        // send response
        res.send('Successfully updated');
    } catch (e) {
        res.send(e);
    }
});

The Problem is that my express app prints an empty object {}. So is it because the json file that I am posting is very big? It has 64 object in an array.

Or the issue comes from the usage of the express app that uses the body-parser module as app.post('/api/updateOrgs', jsonParser, (req, res)=> {?

Answer 1

Try it:

dataType: 'json',
contentType: 'application/json',
data : JSON.stringify({json:JSON.parse(data)}),

All code:

<script>
        /* UPDATE ORGANIZATION LIST*/
        function updateOrgs () {
            var data = $('#showOrgs').val();

            $.ajax({
                url : "http://localhost:8000/api/updateOrgs",
                type: "POST", // data type (can be get, post, put, delete)
                dataType: 'json',
                contentType: 'application/json',
                data : JSON.stringify({json:JSON.parse(data)}), // data in json format
                async : false, // enable or disable async (optional, but suggested as false if you need to populate data afterwards)
                success: function(response, textStatus, jqXHR) {
                    alert(response);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown)
                }
            });
        }        
</script>