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>
3 answers
solution1
4 ACCPTED 2017-02-14 16:41:05
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>
solution2
1 2017-02-14 16:44:41
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;
solution3
0 2017-02-14 16:55:14
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.