Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="json to html form" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <form id="modelForm" novalidate >
    
  </form>
  
</body>
</html>
 
//Json to html form
//replace the var model with your json
var model ={name: "pepe", email : "mail@mail.com", age: "56"};
String.prototype.format = function() {
    var formatted = this;
    for( var arg in arguments ) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};
var htmlfieldset = '<fieldset><label for="field">{0} :  </label><input ng-model="model.account.{1}" type="text"></fieldset>';
var fields = [];
for(var fieldname in model ){
  fields.push({ name: fieldname , value: model[fieldname] });
}
for(var index in fields){
  var htmlToIsnert = htmlfieldset.format(fields[index].name, fields[index].name);
  $("form#modelForm").append(htmlToIsnert);
}
          
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
elranupro
0viewers