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

我得到错误:Cannot read property 'value' of undefined

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

下面是一个示例。

Answer 2

您可以使用elem[i].id:

 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].id
       // Since you are looping through the inputs, you will get the `inputTime` in the 2nd iteration.
    });
   }
};