Javascript, Creating a form from an array of objects

Question

Trying to read objects from array and place them in a form. I am new to Javascript and I am struggling to understand why this doesn't work. I have tried to look online for help but so far haven't found anything.

Here is my code so far:

        var arr = [
            {Section: 1, Max: 20},
            {Section: 2, Max: 30},
            {Section: 3, Max: 50}
        ];

        var length = arr.length;

        function createForm() {
            for (i = 0; i <= length; i++) {
                form = document.getElementById("formed");
                var x = arr.Section[i];
                var y = arr.Max[i];
                form.appendChild(x);
                form.appendChild(y);

            }

        }

<head>
    <meta charset="utf-8">
</head>
<body onload="createForm();">
<form id="formed">
</form>
</body>

Your code doesn't generate any HTML elements to add to the form. .appendChild() needs an HTML element to append. If you want to insert data, then you need to have an element to insert it into. — Scott Marcus
– Scott Marcus, Commented Feb 14, 2017 at 16:41

Zakaria Acharki · Accepted Answer · 2017-02-14 16:48:08Z

4

You have to use index i on array and not on object attributes, like :

var x = arr[i].Section;
var y = arr[i].Max;

Instead of :

var x = arr.Section[i];
var y = arr.Max[i];

Hope this helps.

Sample snippet that generate input's with values x/y from the object :

var arr = [
  {Section: 1, Max: 20},
  {Section: 2, Max: 30},
  {Section: 3, Max: 50}
];

var length = arr.length;

function createForm(){
  for (i in arr) {
    form = document.getElementById("formed");

    var x = arr[i].Section;
    var y = arr[i].Max;

    var input = document.createElement('input');
    input.setAttribute('value', x+' -- '+y)

    form.appendChild(input);
  }
}

<body onload="createForm();">
  <form id="formed"></form>
</body>

edited Feb 14, 2017 at 16:48

answered Feb 14, 2017 at 16:41

Zakaria Acharki

67.5k15 gold badges78 silver badges106 bronze badges

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

3 Comments

Scott Marcus Over a year ago

This still won't actually append any child elements to the form.

Zakaria Acharki Over a year ago

Yes because there's no HTML generation, but the main problem comes from those indexes. I've added a sample just to give it an idea..

NLee57 Over a year ago

Thank you for this! I understand where I was going wrong now. I was really struggling to get this working.

Iaconis Simone · Accepted Answer · 2017-02-14 16:44:41Z

1

I can't understand what you want to do but if you want to call the x element of an array you must do:

var array = ["mario","luca","paolo"];
print(array[0]); //will print "mario"

then you must do:

arr[i].Section;

answered Feb 14, 2017 at 16:44

Iaconis Simone

2823 silver badges12 bronze badges

Comments

Abhinav Galodha · Accepted Answer · 2017-02-14 16:55:14Z

There are multiple issues in your code.

1. Condition within for loop: The condition in the for loop is incorrect for (i = 0; i <= length; i++) { for loop should be running till the condition i <length otherwise you will reach the length of the array and will get undefined.

2. Accessing Array Elements: You need to access the array by the index. So following needs to be changed to

var x = arr.Section[i]; var y = arr.Max[i];

To

var x = arr[i].Section; var y = arr[i].Max;

3.Appending Nodes to DOM: You can only add Node elements to the DOM. So, you can't write directly form.appendChild(x); but instead you need to create a Node object like TextNode by method on document object like document.createTextNode(x)

So, Change

form.appendChild(x); form.appendChild(y);

To

var textnodex = document.createTextNode(x); var textnodey = document.createTextNode(y ); form.appendChild(textnodex); form.appendChild(textnodey);

Following is the complete working version

var arr = [
            {Section: 1, Max: 20},
            {Section: 2, Max: 30},
            {Section: 3, Max: 50}
        ];

        var length = arr.length;

        function createForm() {
            for (i = 0; i < length; i++) {
                var form = document.getElementById("formed");
                var x = arr[i].Section;
                var y = arr[i].Max;
                var textnodex = document.createTextNode(x);
                var textnodey = document.createTextNode(y);
                form.appendChild(textnodex);
                form.appendChild(textnodey);

            }

        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
</head>
<body onload="createForm();">

<form id="formed">
</form>


</body>
</html>

Collectives™ on Stack Overflow

Javascript, Creating a form from an array of objects

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related