how to perform operations with json string from axios?

Question

Background

I am passing variable from my frontend HTML file using axios

var idToken1 = result.getIdToken();
                    
axios({
  method: 'post',
  url: '/trial',
  data: idToken1,
  headers: {'Content-Type': 'application/x-www-form-urlencoded' }
})
.then(function (response) {
    //handle success
    console.log(response);
})
.catch(function (response) {
    //handle error
    console.log(response);
});

in my app.js under route getting this as output,here all the values are present in key and key values is empty. so i think i need a way to parse those keys first

 {
      '{"payload":{"cognito:username":"jatin","exp":1620965984,"iat":1620962384,"email":"xxxx@gmail.com"}}': ''
    }

i want to extract "email":"xxxx@gmail.com"

update: in app.js i am already using express native parser app.use(express.json()); app.use(express.urlencoded({ extended: true }));`

JRichardsz · Answer 1 · 2021-05-14T04:41:32.660

0

A parser is required if you want to get the http body as object:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));

Then you can use req.body to get the http body sent by your html web:

app.post('/trial', function(req, res) {
  var email = req.body.payload.email;
  //etc
});

edited May 14 '21 at 04:41

answered May 14 '21 at 03:36

JRichardsz

14,356
6
59
94

I am already using `app.use(express.json()); app.use(express.urlencoded({ extended: true }));` updated my question – Jatin Mehrotra May 14 '21 at 04:29
order is very important. Take a look to this sample https://github.com/jrichardsz/nodejs-express-snippets/blob/master/04-post-endpoint.js – JRichardsz May 14 '21 at 04:40
i corrected my order too but still when i do req.body.payload it shows undefined in the console. did you check my json string, it is inthis general form `{ ''{"payload":{"cognito:username":"jatin","exp":1620965984,"iat":1620962384,"email":"xxxx@gmail.com"}}' : ' ' }`. here all the values are present in key and key values is empty. so i think i need a way to parse those keys first? – Jatin Mehrotra May 14 '21 at 05:23
As you can see [here](https://res.cloudinary.com/practicaldev/image/fetch/s--MuvkO3GC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/coe8u0vt3iryp70e1rdv.png), x-www-form-urlencoded is used to send key=value, not for complex objects. You are sending `data: idToken1` in which `idToken1` is an object. You have two options: #1 use application/json as content-type or #2 convert **idToken1** to key=value before sending using axios. Advice : test your /trial with postman to validate if the error is in your axios side or in the /trial – JRichardsz May 14 '21 at 13:47
SO true. your #1 method return empty object however #2 works for me. – Jatin Mehrotra May 14 '21 at 15:46

score 0 · Accepted Answer · answered May 14 '21 at 06:31

The problem was with axios. axios needed object to be send as json object. var idToken1 = result.getIdToken();

the following code results in proper JSON object in my backend

axios({
  method: 'post',
  url: '/trial',
  data: { idToken: idToken1 },
  headers: { 'Content-Type': 'application/json' }
})
.then(function (response) {
  //handle success
  console.log(response);
})
.catch(function (response) {
  //handle error
  console.log(response);
});

score 0 · Answer 3 · answered May 07 '22 at 13:29

The Problem cause is 'Content-Type' is should be 'application/json'

axios({
        method: 'post',
        url: '/trial',
        data: idToken1,
        headers: { 'Content-Type': 'application/json' }
    })
        .then(function (response) {
            //handle success
            console.log(response);
        })
        .catch(function (response) {
            //handle error
            console.log(response);
        });

how to perform operations with json string from axios?

3 Answers3