JSON에서 데이터로 폼을 채우는 방법

Question

두 개의 파일, JSON에 간단한 HTML 폼과 데이터가 저장되어 있습니다.

JSON에서 가져온 임의의 데이터로 양식을 채우고 싶습니다. 이러한 데이터는 동일한 객체에 상대적이어야합니다.

<form id="first_form"> 
    Name:<br> 
    <input id="name" type="text" name="name"> 
    <br> 
    Phone:<br> 
    <input id="phone" type="number" name="phone"> 
    <br> 
    City:<br> 
    <input id="city" type="text" name="city"> 
    <br> 
    Pcode:<br> 
    <input id="pcode" type="number" name="pcode"> 
    Note:<br> 
    <input id="note" type="text" name="note"> 
    <br> 
</form> 

내 JSON은 다음과 같습니다 :

users: [ 
{ 
    "name": "name1", 
    "phone": "111111111", 
    "address": "address1", 
    "city": "city1", 
    "pcap": 1111, 
    "note": "" 
}, 
{ 
    "name": "name2", 
    "phone": "222222222", 
    "address": "address2", 
    "city": "city2", 
    "pcap": 2222, 
    "note": "" 
}, 
{ 
    "name": "name3", 
    "phone": "333333333", 
    "address": "address3", 
    "city": "city3", 
    "pcap": 3333, 
    "note": "" 
}, 
{ 
    "name": "name4", 
    "phone": "44444444", 
    "address": "address4", 
    "city": "city4", 
    "pcap": 4444, 
    "note": "" 
} 
] 

노의 jQuery 방법으로 그렇게 할 수있는 방법이 있나요처럼

내 양식이 보인다?

Answer 1

users :이 아닌 users =이 좋기를 바랍니다. 또한 'PCAP'다음 코드가 이미 시도 무엇

var indx = Math.floor(Math.random()*users.length); 
var randUser = users[indx]; 

for(prop in randUser) { 
    document.getElementById(prop).value = randUser[prop]; 
} 

Answer 2

비 jQuery (또는 다른 프레임 워크) 방법이 있지만 매우 지루합니다 (이러한 프레임 워크가 존재하는 이유).

추가 정보 : 개체의 ARRAY를 사용하여 "단일"양식을 채우는 방법은 무엇입니까? 양식을 반복하거나 원하는 데이터 세트를 선택할 수있는 방법이 필요합니다.

JSON에서 양식을 작성하는 한 가지 쉬운 방법은 https://github.com/corinis/jsForm (면책 조항 : 나는 그 모듈의 저자) 당신이 정말로 그것을 내가 가까이 복용하는 것이 좋습니다 어려운 방법으로 해보고 싶다면

---

look at http://www.w3schools.com/js/js_htmldom.asp

완전한 DOM 처리를 시작하고 입력란과 일치하는 양식 필드를 식별하고 크로스 브라우저 DOM 구현 문제에 대해 걱정해야합니다.

은 기본적으로 당신은 당신이 구문 분석을 시작할 위치의 "뿌리"점점 시작 :

var root = document.getElementById("first_form"); 

을하고있는 당신이 할 수있는 폼을 식별하는 모든 어린이와 그 childrent 통과 재귀 함수가 다음 개체에 대해 확인하십시오.

function replace(root, obj) { 
    var children = root.childNodes; 
    for(var i = 0; i < children.lenght; i++) { 
    var child = children[i]; 
    // go deep 
    if(child.children) { 
     replace(child, obj); 
    } 
    // check if we have a name attribute - then assume its a form and set its value 
    if(child.getAttribute("name")) { 
     child.setAttribute("value", obj[child.getAttribute("name")]); 
    } 
    } 
} 

코드를 확장하여 개체의 하위 개체 또는 다른 특성을 허용 할 수도 있습니다.

다른 방식으로 돌아 가면 (오브젝트에서 필드를 검색하고 필드를 검색하는 것)도 작동하고 코드는 적지 만 매우 단순한 오브젝트에서만 작동합니다.