javascript循环按名称然后按元素ID形成值

Question

我有一个循环遍历表单值，它工作正常，可以根据输入名称抛出值。但我也希望能够通过特定元素 ID 进行定位。

这是一个示例表单:

_inputFields: function() {
    var rows = [];
    for(var i = 1; i <= 12; i++) {
      var placeHolder = 'Intro text line ' + i;
      var inputID = 'inputIntroText ' + i;
      rows.push(<input type="text" className="form-control input-size-lg" name="formInput" id="inputText" placeholder={placeHolder}/>);
      rows.push(<input type="text" className="form-control input-size-lg" name="formInput" id="inputTime" placeholder={placeHolder}/>);
    }

所以我可以循环遍历并按名称获取所有内容，即“formInput”，但我如何才能获取 formInput[inputText] 和 formInput[inputTime]？

这是我当前的值循环:

// gather form input
var elem = document.getElementsByName('formInput');
console.log(elem);

// Build the object
var obj = {
    "DataObject": {
        "user": {
            "-name": "username"
        },
        "contentFile": {
            "-filename": "Breaking_News",
            "lock": {
                "-fileIsBeingEdited": "false"
            },
            "content": {
                "line": []
            }
        }
    }
};

var line = obj.DataObject.contentFile.content.line;
for (var i = 0; i < elem.length; i++) {
    if (elem[i].value != '') {
        line.push({
            "-index": i,
            "-text": elem[i]['inputText'].value,
            "-time": elem[i]['inputTime'].value
        });
    }
};

如果我尝试:

"-text": elem[i]['inputText'].value,
"-time": elem[i]['inputTime'].value

我收到错误:无法读取未定义的属性“值”

Answer 1

这个错误是因为 elem[i]['inputText'] 是 undefined。这是因为您正在尝试查找元素的 inputText 属性，该属性不存在。

elem 是一个数组，所以我建议使用类似 filter 的东西.

"-text": elem.filter(function(item) {
    return item.id === 'inputText';
})[0].value;

此外，您应该删除 for 循环，否则您将得到重复的行。

function getElementById(elems, id){
    return elems.filter(function(item) {
        return item.id === id;
    })[0];
}

var line = obj.DataObject.contentFile.content.line;
line.push({
    "-text": getElementById(elem, 'inputText').value,
    "-time": getElementById(elem, 'inputTime').value
});

这是一个例子 jsfiddle .