Dynamically Add / Remove multiple input fields export JSON

JavaScript
1

I am creating dynamic input and textarea. Each package has an input and a textarea. and the user can create a maximum of 10.

I want to get the result of input and textarea as JSON but I can’t get it the way I want and I don’t know how to improve from this point.

The current JSON output is like this;

[
   {"name":"textbox2","value":"test #1"},
   {"name":"textareabox2","value":"test-textarea #1"},
   {"name":"textbox2","value":"test #2"},
   {"name":"textareabox2","value":"test-textarea #2"},
   {"name":"textbox3","value":"test #3"},
   {"name":"textareabox3","value":"test-textarea #3"}
]

What I want should be like this, How can I convert it to this? like this:

[

    {'input':'test #1',  'textarea' :'test-textarea #1'},
    {'input':'test #2',  'textarea' :'test-textarea #2'},
    {'input':'test #3',  'textarea' :'test-textarea #3'}

]
2

This is how you can refactor your export function:

$('.exportJSON').click(function () {
    // array of result objects
    let result = [];

    // lets iterate through all rows of the form
    // each row is a <div> nested as direct child of #TextBoxesGroup
    $("#frm").find('#TextBoxesGroup > div').each((index, row) => {

        // convert current row to jQuery object
        const $row = $(row);

        // get values of input and textarea in current row
        const values = {
            'input': $row.find('input').val(),
            'textarea': $row.find('textarea').val(),
        };

        // add values to results
        result.push(values);

    });

    var json = JSON.stringify(result);
    $("#json").html(json);
});
3

Thank you for your help.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.