A bug in a JSON editor by AngularJS

Question

I want to use this JSON editor, but I have found a bug: JUST after loading the web page, if we modify a value of a field in the treeview (resp., textarea), the value in the textarea (resp., treeview) will change automatically, which is great. However, after loading the web page, if we modify first a value in the treeview (eg, Miller to Miller 1), then modify the value of the SAME field in the textarea (eg, Miller 1 to Miller 2), the value in the treeview will NOT be changed automatically (ie, it is still Miller 1).

I tried to make a shorter JSBin, which has the same bug. I think the bug probably comes from the AngularJS part:

<!DOCTYPE html>
<html ng-app="JSONedit">
<head>

  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/jquery-ui/jquery-ui.min.js"></script>
  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/angular/angular.min.js"></script>
  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/angular-ui-sortable/sortable.min.js"></script>
  <link href="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://rawgit.com/mb21/JSONedit/gh-pages/css/styles.css" rel="stylesheet" type="text/css" />

  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/js/directives.js"></script>
</head>
<body>  
  <script>
    'use strict';

    var app = angular.module('exampleApp', ['JSONedit']);

    function MainViewCtrl($scope, $filter) {
        $scope.jsonData = { Name: "Joe" };

        $scope.$watch('jsonData', function(json) {
            $scope.jsonString = $filter('json')(json);
        }, true);
        $scope.$watch('jsonString', function(json) {
            try {
                $scope.jsonData = JSON.parse(json);
                $scope.wellFormed = true;
            } catch(e) {
                $scope.wellFormed = false;
            }
        }, true);
    }
  </script>
  <div id="mainView" ng-controller="MainViewCtrl">
    <div class="jsonView">
      <json child="jsonData" default-collapsed="false" type="object"></json>
    </div>

    <hr>
    <div>
      <textarea id="jsonTextarea" ng-model="jsonString"></textarea>
      <span class="red" ng-if="!wellFormed">JSON not well-formed!</span>
    </div>
  </div>
</body>
</html>

Does anyone know what's wrong there?

Community · Accepted Answer · 2017-05-23 12:13:57Z

3

+100

This is a JSONedit bug, just submitted a merge request.

Reason is that "child" binding updates may not propagate to ng-repeat. Using parent scope reference fixes this (simpler example here Angularjs ng-model inside ng-repeat via (key,val) not updating)

Relevant code:

<span ng-repeat="(key, val) in child">
  ...
  <input type="text" ng-model="child[key]"

As a temporary fix, you may embed the whole script to your page, working example here

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Dec 9, 2016 at 3:31

sbedulin

4,4101 gold badge26 silver badges34 bronze badges

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

1 Comment

user6330767 Over a year ago

do you have any idea about this related question?

Collectives™ on Stack Overflow

A bug in a JSON editor by AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related