jQuery building json from all inputs with map()

Question

I'm trying to iterate over all inputs in the page and build a JSON to send via post request to backend:

function getBody() {
         var blocks = $('.list-group-item').map(function(idx, elem) {

            var inputs = $(elem).find('.block-input').map(function (idi, input) {
               //Probably this part needs to change
               return {
                  [$(input).attr('name')]: $(input).val()
               };
            }).get();


            return {
               id: $(elem).data('id'),
               name: $(elem).data('name'),
               inputs,
            };
         }).get();

         var products_json = JSON.stringify(blocks,null,'\t');
         console.log(products_json)
};

It works, and this is my result:

[
    {
        "id": 13,
        "name": "About us",
        "inputs": [
            {
                "title": "How we started"
            },
            {
                "paragraph": "We started 5 years ago in a ..."
            }
        ]
    }
]

I want to get back a single object for all inputs and not an object per input, how do I return a key-value pair to object with map()? I want the result to look like this:

[
    {
        "id": 13,
        "name": "About us",
        "inputs": {
            "title": "How we started"
            "paragraph": "We started 5 years ago in a ..."
        }
    }
]

Does this answer your question? How can I add a key/value pair to a JavaScript object? — Ryan Wilson
– Ryan Wilson, Commented Mar 30, 2020 at 15:30

Barmar · Accepted Answer · 2020-03-30 15:33:54Z

1

Don't use map to create the inputs object. Use a loop that adds a key/value element to an object.

function getBody() {
  var blocks = $('.list-group-item').map(function(idx, elem) {
    var inputs = {};
    $(elem).find('.block-input').each(function(idi, input) {
      inputs[$(input).attr('name')] = $(input).val();
    });

    return {
      id: $(elem).data('id'),
      name: $(elem).data('name'),
      inputs,
    };
  }).get();

  var products_json = JSON.stringify(blocks, null, '\t');
  console.log(products_json)
};

answered Mar 30, 2020 at 15:33

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2020-03-30 15:34:05Z

1

You can fix this by updating the return statement inside getBody() like:

return {
   id: $(elem).data('id'),
   name: $(elem).data('name'),
   inputs: Object.assign({}, ...inputs),
};

answered Mar 30, 2020 at 15:34

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Dhaval Vachheta · Accepted Answer · 2020-03-30 15:42:19Z

0

You can convert inputs array to object using Array.reduce().

const inputsObject = inputs.reduce((accumulator, currentValue) => {
const [firstKey] = Object.keys(currentValue);
    accumulator[firstKey] = currentValue[firstKey];
    return accumulator;
}, {})

Then return it,

return {
           id: $(elem).data('id'),
           name: $(elem).data('name'),
           inputs: inputsObject,
        };

answered Mar 30, 2020 at 15:42

Dhaval Vachheta

1044 bronze badges

Collectives™ on Stack Overflow

jQuery building json from all inputs with map()

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related