JSONedit
19 | 20 |
21 |
23 |
24 | 25 |
26 |
27 | JSON not well-formed!
28 |
29 | 
16 |
17 |
18 |
25 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/js/JSONedit.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var app = angular.module('exampleApp', ['JSONedit']);
4 |
5 | function MainViewCtrl($scope, $filter) {
6 |
7 | // example JSON
8 | $scope.jsonData = {
9 | Name: "Joe", "Last Name": "Miller", Address: {Street: "Neverland 42"}, Hobbies: ["doing stuff", "dreaming"]
10 | };
11 |
12 | $scope.$watch('jsonData', function(json) {
13 | $scope.jsonString = $filter('json')(json);
14 | }, true);
15 | $scope.$watch('jsonString', function(json) {
16 | try {
17 | $scope.jsonData = JSON.parse(json);
18 | $scope.wellFormed = true;
19 | } catch(e) {
20 | $scope.wellFormed = false;
21 | }
22 | }, true);
23 | }
24 |
--------------------------------------------------------------------------------
/js/directives.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('JSONedit', ['ui.sortable'])
4 | .directive('ngModelOnblur', function() {
5 | // override the default input to update on blur
6 | // from http://jsfiddle.net/cn8VF/
7 | return {
8 | restrict: 'A',
9 | require: 'ngModel',
10 | link: function(scope, elm, attr, ngModelCtrl) {
11 | if (attr.type === 'radio' || attr.type === 'checkbox') return;
12 |
13 | elm.unbind('input').unbind('keydown').unbind('change');
14 | elm.bind('blur', function() {
15 | scope.$apply(function() {
16 | ngModelCtrl.$setViewValue(elm.val());
17 | });
18 | });
19 | }
20 | };
21 | })
22 | .directive('json', ["$compile", function($compile) {
23 | return {
24 | restrict: 'E',
25 | scope: {
26 | child: '=',
27 | type: '@',
28 | defaultCollapsed: '='
29 | },
30 | link: function(scope, element, attributes) {
31 | var stringName = "Text";
32 | var objectName = "Object";
33 | var arrayName = "Array";
34 | var refName = "Reference";
35 | var boolName = "Boolean";
36 | var numberName = "Number";
37 |
38 | scope.valueTypes = [stringName, objectName, arrayName, refName, boolName, numberName];
39 | scope.sortableOptions = {
40 | axis: 'y'
41 | };
42 | if (scope.$parent.defaultCollapsed === undefined) {
43 | scope.collapsed = false;
44 | } else {
45 | scope.collapsed = scope.defaultCollapsed;
46 | }
47 | if (scope.collapsed) {
48 | scope.chevron = "glyphicon-chevron-right";
49 | } else {
50 | scope.chevron = "glyphicon-chevron-down";
51 | }
52 |
53 |
54 | //////
55 | // Helper functions
56 | //////
57 |
58 | var getType = function(obj) {
59 | var type = Object.prototype.toString.call(obj);
60 | if (type === "[object Object]") {
61 | return "Object";
62 | } else if(type === "[object Array]"){
63 | return "Array";
64 | } else if(type === "[object Boolean]"){
65 | return "Boolean";
66 | } else if(type === "[object Number]"){
67 | return "Number";
68 | } else {
69 | return "Literal";
70 | }
71 | };
72 | var isNumber = function(n) {
73 | return !isNaN(parseFloat(n)) && isFinite(n);
74 | };
75 | scope.getType = function(obj) {
76 | return getType(obj);
77 | };
78 | scope.toggleCollapse = function() {
79 | if (scope.collapsed) {
80 | scope.collapsed = false;
81 | scope.chevron = "glyphicon-chevron-down";
82 | } else {
83 | scope.collapsed = true;
84 | scope.chevron = "glyphicon-chevron-right";
85 | }
86 | };
87 | scope.moveKey = function(obj, key, newkey) {
88 | //moves key to newkey in obj
89 | if (key !== newkey) {
90 | obj[newkey] = obj[key];
91 | delete obj[key];
92 | }
93 | };
94 | scope.deleteKey = function(obj, key) {
95 | if (getType(obj) == "Object") {
96 | if( confirm('Delete "'+key+'" and all it contains?') ) {
97 | delete obj[key];
98 | }
99 | } else if (getType(obj) == "Array") {
100 | if( confirm('Delete "'+obj[key]+'"?') ) {
101 | obj.splice(key, 1);
102 | }
103 | } else {
104 | console.error("object to delete from was " + obj);
105 | }
106 | };
107 | scope.addItem = function(obj) {
108 | if (getType(obj) == "Object") {
109 | // check input for key
110 | if (scope.keyName == undefined || scope.keyName.length == 0){
111 | alert("Please fill in a name");
112 | } else if (scope.keyName.indexOf("$") == 0){
113 | alert("The name may not start with $ (the dollar sign)");
114 | } else if (scope.keyName.indexOf("_") == 0){
115 | alert("The name may not start with _ (the underscore)");
116 | } else {
117 | if (obj[scope.keyName]) {
118 | if( !confirm('An item with the name "'+scope.keyName
119 | +'" exists already. Do you really want to replace it?') ) {
120 | return;
121 | }
122 | }
123 | if (scope.valueType == numberName && !isNumber(scope.valueName)){
124 | alert("Please fill in a number");
125 | return;
126 | }
127 | // add item to object
128 | switch(scope.valueType) {
129 | case stringName: obj[scope.keyName] = scope.valueName ? scope.valueName : "";
130 | break;
131 | case numberName: obj[scope.keyName] = scope.possibleNumber(scope.valueName);
132 | break;
133 | case objectName: obj[scope.keyName] = {};
134 | break;
135 | case arrayName: obj[scope.keyName] = [];
136 | break;
137 | case refName: obj[scope.keyName] = {"Reference!!!!": "todo"};
138 | break;
139 | case boolName: obj[scope.keyName] = false;
140 | break;
141 | }
142 | //clean-up
143 | scope.keyName = "";
144 | scope.valueName = "";
145 | scope.showAddKey = false;
146 | }
147 | } else if (getType(obj) == "Array") {
148 | if (scope.valueType == numberName && !isNumber(scope.valueName)){
149 | alert("Please fill in a number");
150 | return;
151 | }
152 | // add item to array
153 | switch(scope.valueType) {
154 | case stringName: obj.push(scope.valueName ? scope.valueName : "");
155 | break;
156 | case numberName: obj.push(scope.possibleNumber(scope.valueName));
157 | break;
158 | case objectName: obj.push({});
159 | break;
160 | case arrayName: obj.push([]);
161 | break;
162 | case boolName: obj.push(false);
163 | break;
164 | case refName: obj.push({"Reference!!!!": "todo"});
165 | break;
166 | }
167 | scope.valueName = "";
168 | scope.showAddKey = false;
169 | } else {
170 | console.error("object to add to was " + obj);
171 | }
172 | };
173 | scope.possibleNumber = function(val) {
174 | return isNumber(val) ? parseFloat(val) : val;
175 | };
176 |
177 | //////
178 | // Template Generation
179 | //////
180 |
181 | // Note:
182 | // sometimes having a different ng-model and then saving it on ng-change
183 | // into the object or array is necessary for all updates to work
184 |
185 | // recursion
186 | var switchTemplate =
187 | ''
188 | + '25 |
'
204 | + '';
205 | if (scope.type == "object"){
206 | // input key
207 | addItemTemplate += ' ';
209 | }
210 | addItemTemplate +=
211 | // value type dropdown
212 | ''
214 | // input value
215 | + ' : '
217 | + ' : '
219 | // Add button
220 | + ' '
221 | + ''
222 | + ''
223 | + ''
224 | // plus button
225 | + ''
226 | + ''
227 | + '
';
228 |
229 | // start template
230 | if (scope.type == "object"){
231 | var template = ''
232 | + ''+objectName+''
233 | + ''
234 | // repeat
235 | + ''
236 | // object key
237 | + ''
238 | + ''
240 | // delete button
241 | + ''
242 | + ''
243 | // object value
244 | + '' + switchTemplate + ''
245 | + ''
246 | // repeat end
247 | + addItemTemplate
248 | + '
';
249 | } else if (scope.type == "array") {
250 | var template = ''
252 | + ''+arrayName+''
253 | + ''
254 | + '
';
266 | } else {
267 | console.error("scope.type was "+ scope.type);
268 | }
269 |
270 | var newElement = angular.element(template);
271 | $compile(newElement)(scope);
272 | element.replaceWith ( newElement );
273 | }
274 | };
275 | }]);
276 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-json-edit",
3 | "version": "0.2.1",
4 | "description": "User friendly, visual JSON editor built as an AngularJS directive. Provides a basic GUI to edit JSON.",
5 | "main": "js/directives.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/mb21/JSONedit.git"
12 | },
13 | "author": "",
14 | "license": "ISC",
15 | "bugs": {
16 | "url": "https://github.com/mb21/JSONedit/issues"
17 | },
18 | "homepage": "https://github.com/mb21/JSONedit#readme",
19 | "dependencies": {
20 | "bootstrap": "^3.3",
21 | "angular": "^1.2",
22 | "angular-ui-sortable": "0.12.x"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
- '
255 | // repeat
256 | + '
- ' 257 | // delete button 258 | + '' 259 | + '' 260 | + '' + switchTemplate + '' 261 | + ' ' 262 | // repeat end 263 | + '