Question

尝试从数组中读取对象并将它们放在表单中。我是Javascript的新手，我很难理解为什么这不起作用。我试着在网上寻求帮助，但到目前为止还没找到任何东西。

到目前为止，这是我的代码：

        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>

Answer 1

您必须在数组上使用索引i而不是对象属性，例如：

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

而不是：

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

希望这有帮助。

从对象生成input个值为x/y的示例摘要：

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

Answer 2

我无法理解你想做什么，但如果你想调用数组的x元素，你必须这样做：

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

然后你必须这样做：

arr[i].Section;

Answer 3

您的代码中存在多个问题。

<强> 1。 for循环中的条件： for循环中的条件不正确for (i = 0; i <= length; i++) { for循环应该运行直到条件i <length否则你将达到数组的长度并且将得到未定义。< / p>

<强> 2。访问数组元素：您需要通过索引访问数组。因此需要将以下内容更改为

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

致

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

3.将节点移植到DOM：您只能向DOM添加Node个元素。因此，您无法直接撰写form.appendChild(x);，而是需要通过Node对象TextNode <上的方法创建document对象，例如document.createTextNode(x) / p>

所以，改变

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

要

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

以下是完整的工作版本

＆＃13;
＆＃13;
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); } }
＆＃13;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body onload="createForm();"> <form id="formed"> </form> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Javascript，从对象数组创建表单

3 个答案: