Generate HTML code from JSON in AngularJS

Question

I am attempting to generate HTML code dynamically from a stored JSON file. The JSON file format:

{
  "fields": [
    {
        "name": "service type",
        "type": "text|radio|checkbox|date",
        "placeholder": "Service Type",
        "value": "",
        "checked": "true"
    },
     {
        "name": "service type",
        "type": "text|radio|checkbox|date",
        "placeholder": "Service Type"
     }
  ]
}

However the type of the DOM element changes according to the JSON file. For example, if type: text, then this has to be generated:

 <input type="text" name="service type" value="">

I'm using AngularJS. How can I implement this?

possible duplicate of Create JSON object dynamically via JavaScript (Without concate strings) — Ted
– Ted, Commented Jul 25, 2015 at 14:48

Matthias A. Eckhart · Accepted Answer · 2015-07-25 20:34:24Z

You can use angularjs-dynamic-form or setup a custom template by yourself.

For instance:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.fields = [{
    "id": 1,
    "name": "service type text",
    "type": "text",
    "placeholder": "Service Type",
    "value": ""
  }, {
    "id": 2,
    "name": "service type radio",
    "type": "radio",
    "choices": [{
      'id': 1,
      'selected': true,
      'name': "Choice 1"
    }, {
      'id': 2,
      'selected': false,
      'name': "Choice 2"
    }]
  }, {
    "id": 3,
    "name": "service type checkbox",
    "type": "checkbox",
    "choices": [{
      'id': 1,
      'selected': true,
      'name': "Choice 1"
    }, {
      'id': 2,
      'selected': false,
      'name': "Choice 2"
    }, {
      'id': 3,
      'selected': true,
      'name': "Choice 3"
    }]
  }];

  $scope.updateRadioChoices = function(field, choice) {
    $.each(field.choices, function(i, val) {
      if (val.id != choice.id) val.selected = false;
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="field in fields">
      <div ng-switch="field.type">
        <div ng-switch-when="text">
          <h5>Text field</h5>
          <hr/>
          <!-- code to render an input field block -->
          <input id="{{ field.id }}" type="text" class="form-control" ng-model="field.value" placeholder="{{ field.placeholder }}" />
        </div>
        <div ng-switch-when="radio">
          <h5>Radio field</h5>
          <hr/>
          <!-- code to render a radio block -->
          <div ng-repeat="choice in field.choices">
            <input name="single-{{ field.id }}" type="radio" id="single-{{ choice.id }}" data-ng-model="choice.selected" data-ng-value="true" ng-change='updateRadioChoices(field, choice)' />
            <label for="single-{{ choice.id }}">{{ choice.name }}</label>
          </div>
        </div>
        <div ng-switch-when="checkbox">
          <h5>Checkbox field</h5>
          <hr/>
          <!-- code to render a checkbox block -->
          <div ng-repeat="choice in field.choices">
            <label for="multiple-{{ choice.id }}">
              <input type="checkbox" ng-model="choice.selected" ng-value="choice.id" name="multiple-{{field.id}}" id="multiple-{{ choice.id }}" />{{ choice.name }}</label>
          </div>
        </div>
        <!-- FALLBACK -->
        <div ng-switch-default>Error. Invalid HTML element type.</div>
      </div>
    </div>
    <h4>Fields - output</h4>
    <hr/>
    {{fields}}
  </div>
</body>

will this support the edited version of my question? If not could you kindly state what's wrong?
Please see my updated answer, I included a demo. If you have any further questions do not hesitate to ask.

Betsy Dupuis · Accepted Answer · 2016-04-08 20:00:10Z

0

If you are just trying to create forms, Angular Formly allows you render templates from json.

answered Apr 8, 2016 at 20:00

Betsy Dupuis

5231 gold badge6 silver badges21 bronze badges

Collectives™ on Stack Overflow

Generate HTML code from JSON in AngularJS

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related