Make Data Driven forms based on JSON with AngularJS

Question

In AngularJS I am trying to make different editable forms from JSON data. I am getting JSON data from $http call.

Sample json data.

{ 
    {"NodeType": "User","NodeDetail":{"Name": "Sam", "Age":24,"Gender":"Male"} }, 
    {"NodeType": "User","NodeDetail":{"Name": "Dazy", "Age":22,"Gender":"Female"} },
    {"NodeType": "Occupation","NodeDetail":{"Type": "Contract","Traveling":"Yes","Benifits":"No", "Medical":"Annual"} },
    {"NodeType": "City","NodeDetail":{"Name": "London","Area":"1,572 sq-km","Elevation":"35 m","Population":"87.9 lakhs"} }
}

I am able to achieve in my HTML as below,

Based on the NodeType the form will have input, text area, radio button etc. As below image,

I think I can do by putting form in ng-if directive. But the problem is , there will be around 40-50 NodeTypes so having all form templates in ng-if will make the page very lengthy. I would prefer to have form template in a external .js file and load from there based on NodeType. Is it possible ? I please guide me what will be the best approach to achieve this. Pointer to any working demo/example will be great help.

Thanks & regards

To be specific, your JSON data starts with an open curly-brace (`{`), implying an object, which means the next thing to appear should be a double-quoted property name. As you seem to desire a collection of objects, you should remove the opening `{` and closing `}` and replace them with `[` and `]` respectively. — JAAulde, Mar 15 '18 at 15:19
@sand Your JSON data should be: `[{ "NodeType": "User", "NodeDetail": { "Name": "Sam", "Age": 24, "Gender": "Male" } }, { "NodeType": "User", "NodeDetail": { "Name": "Dazy", "Age": 22, "Gender": "Female" } }, { "NodeType": "Occupation", "NodeDetail": { "Type": "Contract", "Traveling": "Yes", "Benifits": "No", "Medical": "Annual" } }, { "NodeType": "City", "NodeDetail": { "Name": "London", "Area": "1,572 sq-km", "Elevation": "35 m", "Population": "87.9 lakhs" } }]`. — Danny Fardy Jhonston Bermúdez, Mar 15 '18 at 15:20

score 0 · Answer 1 · answered Mar 15 '18 at 15:23

ng-repeat can cycle through keys and values. So once you select your object from that array, you can list the keys and values without any templates. Here is an example:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.data = [{
      "NodeType": "User",
      "NodeDetail": {
        "Name": "Sam",
        "Age": 24,
        "Gender": "Male"
      }
    },
    {
      "NodeType": "User",
      "NodeDetail": {
        "Name": "Dazy",
        "Age": 22,
        "Gender": "Female"
      }
    },
    {
      "NodeType": "Occupation",
      "NodeDetail": {
        "Type": "Contract",
        "Traveling": "Yes",
        "Benifits": "No",
        "Medical": "Annual"
      }
    },
    {
      "NodeType": "City",
      "NodeDetail": {
        "Name": "London",
        "Area": "1,572 sq-km",
        "Elevation": "35 m",
        "Population": "87.9 lakhs"
      }
    }
  ]
  $scope.select = function(x) {
    $scope.selected = x;
  }
});

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

<div ng-app="myApp" ng-controller="myCtrl">

  <div ng-repeat="x in data">
    {{$index+1}}. <button ng-click="select(x)">{{x.NodeType}}</button>
  </div>
  <hr>

  <div ng-repeat="(key, value) in selected.NodeDetail">
    {{key}}: {{value}}
  </div>

</div>

Thanks @Aleksey , but we need to show data in forms which can be editable. Simple displaying the data is not the requirement. — usersam, Mar 15 '18 at 15:35
@sand you would have to extend your json with something like `"type":"dropdown"` or `"type":"input"` and extent the form accordingly, otherwise you have no way of knowing how to display the data (that's where your ng-if would come in) — Aleksey Solovey, Mar 15 '18 at 15:39
I can differentiate based on JSON keys, (Types, Traveling..) for dropdown and input, in "NodeDetail". But how to have the different form template which are data driven. — usersam, Mar 16 '18 at 04:48

Make Data Driven forms based on JSON with AngularJS

1 Answers1