从数组中自动填充 HTML 表单答案

【问题标题】：Automatically filling in HTML form from array从数组中自动填充 HTML 表单
【发布时间】：2013-03-04 17:43:46
【问题描述】：

预期结果：使用document.getElementById 加载时自动填写表单，仅限javascript。

我有一个传递给以下函数的数组，该函数正确地将其添加到 html 脚本中。

 function showResults(results) {
     var s = "";
     for (var i=0, il=results.features.length; i<il; i++) {
         var featureAttributes = results.features[i].attributes;

         for (att in featureAttributes) {
             s = s + "<b>" + att + ":</b>  " + featureAttributes[att] + "<br />";
             // var subshed = feature[0].attributes["SubWS"];

         }
     }
     dojo.byId("info").innerHTML = s;
 }

结果看起来像

对象编号：190 ProjectTyp：雨水改造单位：下 SubWS：悲伤

但是，我需要修改脚本以使用

填写现有表单

document.getElementById(att).value = featureAttributes[att];

我似乎总是覆盖最终输出，所以我只填写一个表单值。如何填写多个值？

更新：Polywhirl 先生说对了。我还必须添加一个 if 语句来处理空属性值。最终代码是：

 function showResults(results) {
            var subshed = results.features[0].attributes["SubWS"];
            //OBJECTID = results.features[0].attributes["OBJECTID"];
document.getElementById("searchString").value = subshed;
                console.log("feature", results.features[0].attributes["SubWS"])
console.log(document.getElementById("Map_ID"));
        var s = "";
    for (var i = 0, il = results.features.length; i < il; i++) {
          var featureAttributes = results.features[i].attributes;
          for (att in featureAttributes) {
        // s = s + "<b>" + att + ":</b>  " + featureAttributes[att] + "<br />";
  //         var subshed = feature[0].attributes["SubWS"];

                //    document.getElementById(att).value = featureAttributes[att];
  if(!!featureAttributes[att]&&!!document.getElementById(att)){
                    document.getElementById(att).value = featureAttributes[att];


}else{

//alert(att + "this is null")

}
          }

        }

     //   dojo.byId("info").innerHTML = s;
      }

【问题讨论】：

你能显示你正在使用的确切代码吗？
被指定为 id 的 att 在哪里？
这是您要找的吗？ jsfiddle.net/w6Zam/8

标签： javascript html arrays forms

【解决方案1】：

因此，您的表单似乎有一些严重嵌套的数据源。

我为你做了两个解析 JS 对象的例子，你可以通过使用所有最近浏览器支持的 JSON.parse(jsonString) 方法来实现，而旧的可以使用在线免费提供的 JSON2.js polyfill。

在第一种情况下，我使用了一个名为 angularJS 的 MVx 框架来说明如何使用，

我把它写得很不优雅，但是对于初学者来说还是可以理解的。

控制器：

function FormData($scope) {
    $scope.data = {
        OBJECTID: 190,
        ProjectTyp: "Stormwater Retrofit",
        Unit: "Lower",
        SubWS: "sadd"
    };
}

部分视图

<form action="path/to/your/action/svc" method="post" ng-controller="FormData">
    <div>
        <label>OBJECTID:</label>
        <input type="text" value="{{data.OBJECTID}}" />
    </div>

同一个小提琴的第二个例子使用plain(vanilla) JS来填充一个表单，将JSON.parse(d)对象转换为一个数组并将其映射到表单中。

对象到数组：

function objectToArray(obj) {
    var arr =[];
    for(x in obj) {
        arr.push(obj[x]);
    }
      return arr;
}

var dataArr = objectToArray(data);

人口：

var form = document.getElementById("myForm");
var formItems = form.getElementsByTagName("input");
for(x in formItems) {
    if(formItems[x].type == "text") {
         formItems[x].value = dataArr[x];
    }
}

小提琴可以在here找到

希望对你有帮助，

迈克。

【讨论】：