배열에서 HTML 양식을 자동으로 채우십시오.

Question

의도 된 결과 : document.getElementById을 사용하여 자동으로 양식을 작성하십시오 (자바 스크립트 만 해당).

나는 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]; 

으로 기존 양식을 작성하는 스크립트를 수정해야 단 하나의 양식 값만 기입하십시오. 여러 값을 채우려면 어떻게해야합니까?

업데이트 : Mr. Polywhirl이 맞습니다. null 속성 값을 처리하기 위해 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; 
     } 

Answer 1

양식에 중첩 된 데이터 소스가있는 것 같습니다.

JS 객체를 구문 분석하는 두 가지 예제를 만들었습니다. 기존의 모든 브라우저에서 지원되는 JSON.parse (jsonString) 메서드를 사용하면 얻을 수 있지만 JSON2.js 폴리 폴리는 온라인에서 자유롭게 사용할 수 있습니다 . 나는 그런의 사용을 설명하기 위해 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> 

동일한 바이올린의 제 일례 JSON.parse 변형 형태를 채우는 JS 플레인 (바닐라)를 사용 (d) 객체를 배열에 넣고 그것을 폼에 매핑합니다. 배열에

대상 :

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

var dataArr = objectToArray(data); 

인구 : 바이올린은

희망이 도움이 here을 찾을 수 있습니다

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

,

마이크.