HTML Form - similar input groups as an array of objects

Question

So I have a form with two identical group of inputs that represent education info. There could be more than two as I want to include a button to create a new group so the user can put all his education background like in LinkedIn.

<form id="formCV" action="">
    <div id="educationContainer">
        <!-- First Group -->
        <div class="education">
            <div>
                <input type="text" name="institutionName">
            </div>
            <div>
                <input type="text" name="courseName">
            </div>
            <div>
                <input type="month" name="startDate">
            </div>
            <div>
                <input type="month" name="endDate">
            </div>
        </div>
        <!-- Second Group -->
        <div class="education">
            <div>
                <input type="text" name="institutionName">
            </div>
            <div>
                <input type="text" name="courseName">
            </div>
            <div>
                <input type="month" name="startDate">
            </div>
            <div>
                <input type="month" name="endDate">
            </div>
        </div>
    </div>
</form>

Now, if I use the FormData API to get the form data like this:

for(let entry of formData.entries()){
    console.log(entry);
}

I get the following output:

(2) ["institutionName", "Harvard"]
(2) ["courseName", "Web Development"]
(2) ["startDate", "2000-11"]
(2) ["endDate", "2008-11"]
(2) ["institutionName", "Oxford"]
(2) ["courseName", "Business Management"]
(2) ["startDate", "2009-10"]
(2) ["endDate", "2010-05"]

What I want to achieve is to get the output in an organized way, like this:

education:[
    {
        institutionName:"Harvard",
        courseName:"Web Development",
        startDate:"2000-11",
        endDate:"2008-11"
    },
    {
        ...
    }
]

So I'm interested in knowing the best approach to achieve this. Thanks in advance for any help!

Antonio Sierra Hurtado · Accepted Answer · 2019-01-11 13:27:42Z

1

It does not make sense to have two equal forms, with one being sufficient.

In addition to the form you should have a list that shows each item added.

It's what I recommend.

answered Jan 11, 2019 at 13:27

Antonio Sierra Hurtado

1691 silver badge10 bronze badges

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

1 Comment

Himad Over a year ago

I'm not working with two equal forms. Let me give you some more context: I'm working in a CV generator, so my form has fields for education background / work experience. So if I worked in 3 different places, I need to put the necessary info of each one, so there's the template with the class "education" that's gonna get cloned every time a user clicks on a button to add a new experience field. When sending it, there might be several identical fields with different information that I want to get serialized as an object that can be easily iterated later to generate the CV.

Ray Chan · Accepted Answer · 2019-01-11 13:51:28Z

Not sure whether this is the best approach, but you can achieve the desired structure like this:

const formCV = document.querySelector('#formCV');
const formData = new FormData(formCV);

function groupEducationData(inputGroupSize = 4) {
    const result = [];
    let educationObj = null;
    let counter = 0;

    for (const entry of formData.entries()) {
        // Since the counter is divisible by the number of inputs in a group
        // only if one form group finishes. And when one form group finishes,
        // we need to add the object into the result array
        if (counter % inputGroupSize === 0) {
            // if this is the first iteration, the educationObj is null and 
            // we don't want to add it to the result array yet
            // we only add the educationObj to the result array if it is
            // an object containing the education info
            if (educationObj) result.push(educationObj);

            // initialize the educationObj at the start
            // and after one form finishes
            educationObj = {};
        }

        // add entry[0] as key to the object (e.g. 'institutionName')
        // with the value of entry[1] (e.g. 'Harvard')
        educationObj[entry[0]] = entry[1];
        counter++;
    }

    return result.concat(educationObj);
}

console.log(groupEducationData());

<form id="formCV" action="">
        <div id="educationContainer">
            <!-- First Group -->
            <div class="education">
                <div>
                    <input type="text" name="institutionName" value="Harvard">
                </div>
                <div>
                    <input type="text" name="courseName" value="Web Development">
                </div>
                <div>
                    <input type="month" name="startDate" value="2000-11">
                </div>
                <div>
                    <input type="month" name="endDate" value="2008-11">
                </div>
            </div>
            <!-- Second Group -->
            <div class="education">
                <div>
                    <input type="text" name="institutionName" value="Oxford">
                </div>
                <div>
                    <input type="text" name="courseName" value="Business Management">
                </div>
                <div>
                    <input type="month" name="startDate" value="2009-10">
                </div>
                <div>
                    <input type="month" name="endDate" value="2010-05">
                </div>
            </div>
        </div>
    </form>

May you please explain the logic behind your solution? I'm struggling to understand it. Thanks!
@Himad Updated my answer with some comments to explain the reasoning behind. But I am not very good at explaining, If there are places not clear, let me know so I can further explaining it.

Prithviraj Sahu · Accepted Answer · 2019-01-11 16:10:20Z

0

You can try FormData.getAll() and iterate over each group entry.

const institutionNames = formData.getAll('institutionName');
const courseNames = formData.getAll('courseName');
...
const educations = [];
for (let i = 0; i < institutionNames.length; i++) {
  educations.push({
    institutionName: institutionNames[i],
    courseName: courseNames[i],
    ...
  });
}

edited Jan 11, 2019 at 16:10

answered Jan 11, 2019 at 13:28

Prithviraj Sahu

2141 silver badge5 bronze badges

Comments

ACT · Accepted Answer · 2019-01-14 09:32:13Z

This is also a way to populate your desired format data.

$(document).ready(function(){
  $(":button").click(function(){
  var educations=$("#formCV .education");
  var data=[];  
   educations.each(function(i,education){
   var set={}
   	$(education).find(":input").each(function(i,value){
    	set[$(value).attr("name")] = $(value).val();
    });
       data.push(set);
   })
   console.log("data",data)
  });
  
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<form id="formCV" action="">
    <div id="educationContainer">
        <!-- First Group -->
        <div class="education">
            <div>
                <input type="text" name="institutionName">
            </div>
            <div>
                <input type="text" name="courseName">
            </div>
            <div>
                <input type="month" name="startDate">
            </div>
            <div>
                <input type="month" name="endDate">
            </div>
        </div>
        <!-- Second Group -->
        <div class="education">
            <div>
                <input type="text" name="institutionName">
            </div>
            <div>
                <input type="text" name="courseName">
            </div>
            <div>
                <input type="month" name="startDate">
            </div>
            <div>
                <input type="month" name="endDate">
            </div>
        </div>
    </div>
    <input type="button" value="click me"/>
</form>

</body>
</html>

Collectives™ on Stack Overflow

HTML Form - similar input groups as an array of objects

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related