ppshein ppshein - 15 days ago 6
JSON Question

How to receive JSON object string in Node Express

I'm using Polymer

<iron-ajax>
to post
JSON.stringify
data to a Node Express server, but that JSON string converted to a weird format (seen below) that I cannot parse. I'd like to parse the
email
value.

<iron-ajax>
body contents set with:

this.$.ajax.body = JSON.stringify({
"email": "pyaephyoeshein@gmail.com",
"full_name": "Pyae Phyoe Shein",
"phone": "123456",
"file":{},
"question1_answer": "answer one",
"question2_answer": "answer two",
"question3_answer": "answer three",
"question1": "What is question one?",
"question2": "What is question two?",
"question3": "What is question three?"
})


Node Express receives:

{"{\"email\":\"pyaephyoeshein@gmail.com\",\"full_name\":\"Pyae Phyoe Shein\",\"phone\":\"123456\",\"file\":{},\"question1_answer\":\"answer one\",\"question2_answer\":\"answer two\",\"question3_answer\":\"answer three\",\"question1\":\"What is question one?\",\"question2\":\"What is question two?\",\"question3\":\"What is question three?\"}":""}

Answer

You don't need to JSON.stringify() the contents of <iron-ajax>.body, as that would cause the body to be sent as a string with its Content-Type set to application/x-www-form-urlencoded (instead of application/json), requiring conversion to JSON by your server.

Set <iron-ajax>.body to the intended object and <iron-ajax>.contentType to application/json, and the Express server should automatically deserialize it into a JSON object.

<iron-ajax url="http://httpbin.org/put"
           method="put"
           content-type="application/json"
           last-response="{{response}}"></iron-ajax>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      response: {
        type: Object,
        observer: '_responseChanged'
      }
    },
    ready: function() {
      this.$.ajax.body = {
        email: "pyaephyoeshein@gmail.com",
        full_name: "Pyae Phyoe Shein",
        phone: "123456",
        file: {},
        question1_answer: "answer one",
        question2_answer: "answer two",
        question3_answer: "answer three",
        question1: "What is question one?",
        question2: "What is question two?",
        question3: "What is question three?"
      };
      this.$.ajax.generateRequest();
    },
    _responseChanged: function(response) {
      console.log('response', response);
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax url="http://httpbin.org/put"
                 method="put"
                 id="ajax"
                 content-type="application/json"
                 last-response="{{response}}"></iron-ajax>
    </template>
  </dom-module>
</body>

codepen