Angular JS dynamic JSON building

Question

I want to start with a base JSON, ie [], and provide a tree like structure with options to edit node (change or extend existing keys/values), add sibling (create new entry), and add child (extend the json to become a map, ie add { "field1" : "value1", "field2" : "value2"} to "data".

Seems like the best way to do this is to bind a json scope value to a tree structure. I am about to build one myself, but thought I would check to see if it's been done already....

This sort of feature would allow someone closer to the business to define and refine the data model, as well as make simple edits. Think the php myadmin interface, or the django admin page.

Community · Accepted Answer · 2017-05-23 11:51:05Z

1

This fiddle will give you a headstart. It was actually referenced from this question. It does not deal with object parameters, just nodes in the tree, but adding these should be pretty straightforward from a controller standpoint. The real challenge is in developing a good-looking view. Here is the controller part (just to make SO happy):

angular.module("myApp", []).controller("TreeController", ['$scope', function($scope) {
  $scope.delete = function(data) {
    data.nodes = [];
  };
  $scope.add = function(data) {
    var post = data.nodes.length + 1;
    var newName = data.name + '-' + post;
    data.nodes.push({name: newName,nodes: []});
  };
  $scope.tree = [{name: "Node", nodes: []}];
}]);

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jan 29, 2013 at 22:52

Ismael Ghalimi

3,5653 gold badges25 silver badges26 bronze badges

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

1 Comment

Robert Christian Over a year ago

"Just editing of the tree itself." - That's the part that takes time. Asking if it's been done already. :)

krispo · Accepted Answer · 2014-02-22 14:13:35Z

0

Check it out json-tree angularjs directive.

answered Feb 22, 2014 at 14:13

krispo

5261 gold badge4 silver badges11 bronze badges

Comments

btk · Accepted Answer · 2015-04-20 14:36:19Z

0

This looks like a good implementation of what you're looking for.

answered Apr 20, 2015 at 14:36

btk

3,2352 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular JS dynamic JSON building

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related