I am trying to make a form in angular using json. When I take a single json file it is easy, because I write my html and using iteration I display the form fields. Now if I have 3 or 4 json files I need to generate a different form with different ids and display it. Can I generate dynamic forms?

I take two button which get json data from file "A" and "B". I need to show the different form on click.

plunker

$scope.getFromAFile = function() {
  // body...
  var inputs=[];
  $http.get('a.json')
    .success(function (data) {
      $scope.formInputs = data.input;
      angular.forEach($scope.formInputs, function(value, key) {
          /* do something for all key: value pairs */
          inputs.push({
            "value": value.value,
            "inputValues": value.inputValues,
            "type": value.inputType.toLowerCase(),
            "name": value.name,
            "required": value.required
          })
      });
      getFormfromData(inputs,'BID');
    })
    .error(function(err){
        alert(err);
    });
}

$scope.getFromBFile = function() {

// body...
$http.get('b.json')
  .success(function (data) {
    var inputs=[];
    $scope.formInputs = data.input;
    angular.forEach($scope.formInputs, function (value, key) {
        /* do something for all key: value pairs */
        inputs.push({
          "value": value.value,
          "inputValues": value.inputValues,
          "type": value.inputType.toLowerCase(),
          "name": value.name,
          "required": value.required
        });
    });
    getFormfromData(inputs,'BID');
  })
  .error(function (err) {
    alert(err);
  });

I am trying to make a form in angular using json. When I take a single json file it is easy, because I write my html and using iteration I display the form fields. Now if I have 3 or 4 json files I need to generate a different form with different ids and display it. Can I generate dynamic forms?

I take two button which get json data from file "A" and "B". I need to show the different form on click.

plunker

$scope.getFromAFile = function() {
  // body...
  var inputs=[];
  $http.get('a.json')
    .success(function (data) {
      $scope.formInputs = data.input;
      angular.forEach($scope.formInputs, function(value, key) {
          /* do something for all key: value pairs */
          inputs.push({
            "value": value.value,
            "inputValues": value.inputValues,
            "type": value.inputType.toLowerCase(),
            "name": value.name,
            "required": value.required
          })
      });
      getFormfromData(inputs,'BID');
    })
    .error(function(err){
        alert(err);
    });
}

$scope.getFromBFile = function() {

// body...
$http.get('b.json')
  .success(function (data) {
    var inputs=[];
    $scope.formInputs = data.input;
    angular.forEach($scope.formInputs, function (value, key) {
        /* do something for all key: value pairs */
        inputs.push({
          "value": value.value,
          "inputValues": value.inputValues,
          "type": value.inputType.toLowerCase(),
          "name": value.name,
          "required": value.required
        });
    });
    getFormfromData(inputs,'BID');
  })
  .error(function (err) {
    alert(err);
  });

• javascript
• jquery
• angularjs
• angularjs-directive

2 Answers 2

There are good "librairies" to build forms from JSON. To name only 2 of them:

• http://formly-js.github.io/angular-formly/#!/
• https://github./json-schema-form/angular-schema-form

I will suggest you to instead use a library for that, coz why to reinvent the wheel when you already have readymade off shelf ponents..

Use Alpaca JS : http://www.alpacajs/

It allows you creating HTML form using simple JSON structures like this

$(function() {
  $("#form1").alpaca({
    "schema": {
      "title": "User Feedback",
      "description": "What do you think about Alpaca?",
      "type": "object",
      "properties": {
        "name": {
          "type": "string",
          "title": "Name"
        },
        "ranking": {
          "type": "string",
          "title": "Ranking",
          "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
        }
      }
    }
  });
});

And the output for this will be something like