0

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,

HTML Example

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

enter image description here

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

Improve this question
4
  • 1
    Your JSON data is invalid Commented Mar 15, 2018 at 15:13
  • 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. Commented Mar 15, 2018 at 15:19
  • 1
    @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" } }]. Commented Mar 15, 2018 at 15:20
  • 1
    @Danny. Yes i accept. Thanks a lot for correction. Commented Mar 15, 2018 at 15:32

1 Answer 1

Reset to default
0

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks @Aleksey , but we need to show data in forms which can be editable. Simple displaying the data is not the requirement.
@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)
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.