How to set one more level in Object of a not predefined item?

Question

The main issue is the following:

1. Get JSON from the server
2. Put data to form
3. Serialize form
4. Create JSON with correct structure
5. Send it to the server

I have difficulties on the fourth step, what I've done:

methods: {
    onSubmit: function() {

        var dataForm = new FormData(this.$refs['form']);
        var data = [];

        for (var _iterator = dataForm.entries(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
            var _Object$assign;
            var _Helper = {};

            var _ref;

            if (_isArray) {
                if (_i >= _iterator.length) break;
                _ref = _iterator[_i++];
            } else {
                _i = _iterator.next();
                if (_i.done) break;
                _ref = _i.value;
            }

            var _ref2 = _ref,
                key = _ref2[0],
                val = _ref2[1];

            Object.assign(_Helper, (_Object$assign = {}, _Object$assign[key] = val, _Object$assign));

        }

    }
},

Here you go - a link to the codepen. As you can see I could create JSON like that:

{"0":"a","1":"b","2":"c","3":"d","4":"e","5":"d"}

However, I need smth like that:

{
  "0": {
    "text": "a"
  },
  "1": {
    "text": "b"
  },
  "2": {
    "text": "c"
  },
  "3": {
    "text": "d"
  },
  "4": {
    "text": "e"
  },
  "5": {
    "text": "d"
  }
}

What Can I do to implement it and also keep the correct structure of my JSON?

Answer 1

To change the format, change in the location it assigns the property value:

Object.assign(data, (_Object$assign = {}, _Object$assign[key] = {text: val}, _Object$assign));
// -------------------------------------------------------------^^^^^^^^^^^

Instead of a string (val), assign the object in the format you want ({text: val}).

Updated CodePen.

If you can use modern (ES6) JavaScript, there's a much shorter notation for that:

var [key, val] = _ref;
Object.assign(data, {[key]: {text: val}});

CodePen here.

Or (because you are using FormData#entries() you do are using modern JS):

var formData = Array.from(new FormData(this.$refs['form']).entries());
var data = Object.assign(...formData.map(([key, val]) => ({[key]: {text: val}})));

console.log(JSON.stringify(data));

Targetting IE10 and above

To target IE10 and above you'll need polyfills. The problem is not the syntax, but the absence of functions like .entries(), that will be added by the polyfills. To use the least amount possible of polyfills, you'll have to iterate the iterator "manually" (kind of like you are already). For more info, check this answer.

Answer 2

You can do the whole construction much more simply:

onSubmit: function () {

  const dataForm = new FormData(this.$refs['form']);
  const data = {};

  for (const i of dataForm.entries()) {
    data[i[0]] = { text: i[1] }
  }

  console.log(JSON.stringify(data));

}