以HTML形式发布JSON数据

Question

I am using React on the front-end & expressJs for server. I have some javascript Object data to send to the server. I JSON.stringify the data & then store it in <textarea/> within the form & I then I just post it.

I am using the modules 'body-parser' for general api calls & 'multer' for this multi-part form submission.

Front-end code:

  <div>
    <form action="/api/query" method="POST">
    {/* following textarea value looks like this:
    {"collection":"Contract","fieldSets":[{"field":"location","value":"London","andOr":""}],"responseType":"csv"} */}
      <textarea defaultValue={JSON.stringify({ collection, fieldSets, responseType: 'csv' })} />
      <Button type="submit">Download</Button>
    </form>
  </div>

Back-end code:

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const upload = multer();
const app = express();
app.set('port', 1111);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// for parsing multipart/form-data
app.use(upload.array());
app.use(express.static('public'));

app.post('/query', (req, res) => {
   // here I keep getting reqbody as an empty {}
  console.log('reqbody is...', req.body);

However, I keep getting {} within req.body on the server. To clarify, the /api/query does work as I am able to fetch data from the url & display on front-end. Its the form submission post which doesn't work.

Thanks

Answer 1

HTML form input fields should have a name attribute to be accepted, otherwise they are ignored in the form submission. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

The above work with the following change:

...
// added name attribute
<textarea name="reqData" defaultValue={JSON.stringify({ collection, fieldSets, responseType: 'csv' })} />
...

Answer 2

JSON.stringify will just stringify the object. in your case looks like you are replacing the object. your syntax looks like

JSON.stringify(obj, replacer, space)

better save your data in one variable and just stringify it by passing as first param to this.

refer : https://www.w3schools.com/jsref/jsref_stringify.asp