從數組自動填寫HTML表單

Question

預期結果：使用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;
 }

結果看起來像

OBJECTID: 190
ProjectTyp: Stormwater Retrofit
Unit: Lower
SubWS: sadd

但是，我需要修改腳本以填充現有表單

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

我似乎總是覆蓋最終輸出，所以我只填寫單個表單值。 如何填寫多個值？

更新：Polywhirl先生做對了。 我還必須添加一個if語句來處理null屬性值。 最終代碼是：

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

Answer 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];
    }
}

小提琴可以在這里找到

希望能幫助到你，

麥克風。