Update json file based on input values using AngularJS

Question

I've written the following code to read data from json file and draw a graph. now I want to get the data from user through input fields and update the json with new values. I wrote the code to copy the value and made it accessible outside the scope, I just wonder how to update the existent json with the new values.

json looks like this:

{

"nodes" : [

          { "id": 1, "label": "End Product", "level": 0 },
          { "id": 2, "label": "A 1", "level": 1 },
          { "id": 3, "label": "A 2", "level": 1 },
          { "id": 4, "label": "A 3", "level": 1 },
          { "id": 5, "label": "B 1", "level": 2 },
          { "id": 6, "label": "C 1", "level": 3 },
          { "id": 7, "label": "B 2", "level": 2 },
          { "id": 8, "label": "B 3", "level": 2 }

        ],

"edges" : [

          { "from": 1, "to": 2 },
          { "from": 1, "to": 3 },
          { "from": 1, "to": 4 },
          { "from": 2, "to": 5 },
          { "from": 5, "to": 6 },
          { "from": 3, "to": 7 },
          { "from": 4, "to": 8 }

        ]

}

var app = angular.module('bomApp', ['bomGraph']);

app.controller('bomController', ['$scope', 'appService', '$rootScope', function ($scope, appService, $rootScope) {
   
    var get = function () {
        appService.get().then(function (promise) {  

            $scope.graph = {
                
                options:  {
                    "hierarchicalLayout": {
                        "direction": "UD"
                        
                    },
                    "edges": {
                        "style":"arrow-center",
                        "color":"#c1c1c1"
                    },
                    "nodes": {
                        "shape":"oval",
                        "color":"#ccc"

                    }
                },
                
                data: {
                    nodes: promise.nodes,
                    edges: promise.edges
                }
            };
             
            
        });
        
    };
    
    $scope.newNode = {
        id: undefined,
        label: undefined,
        level: undefined,
        parent: undefined,
       
    };

    $scope.arrNode = {};
    $scope.update = function (nodes) {
        $scope.arrNode = angular.copy(nodes);
        $rootScope.nodex = angular.copy(nodes);
        
       
    };

   
    
    $scope.newEdge = {
        id: undefined,
        from: undefined, 
        to: undefined
       
    };
   
    $scope.arrEdge = {};
    $scope.updateE = function (edges) {
        $scope.arrEdge = angular.copy(edges);
        $rootScope.edgex = angular.copy(nodes);
    };
    
   
    get();
    

}]);



app.factory('appService', ['$q', '$http', '$rootScope', function ($q, $http, $rootScope) {
    
    return {
        get: function (method, url) {
            var deferred = $q.defer();
            $http.get('data.json')
              .success(function (response) {
                  deferred.resolve(response);
                  
              })
            return deferred.promise;
           
        },

     
        
    };
    
}]);

<body data-ng-app="bomApp">
    <div data-ng-controller="bomController">
        <h3>Create Your Own Graph</h3>
        <div class="node">
            <h4>Nodes:</h4>
            <div class="panel">
                <label>Id:</label>
                <input type="text" id="idNode" data-ng-model="newNode.id"/>
                <br />
                <label>Label:</label>
                <input type="text" id="label" data-ng-model="newNode.label" />
                <br />
                <label>Level:</label>
                <input type="text" id="level" data-ng-model="newNode.level" />
            </div>
            <div>
                <button id="addNode" data-ng-click="update(newNode)">Add</button>
                
            </div>
        </div>
        <div class="node">
            <h4>Edges:</h4>
            <div class="panel" >
                <label>Id:</label>
                <input type="text" id="idEdge" data-ng-model="newEdge.id"/>
                <br />
                <label>From:</label>
                <input type="text" id="from" data-ng-model="newEdge.from"/>
                <br />
                <label>To:</label>
                <input type="text" id="to" data-ng-model="newEdge.to"/>
            </div>
            <div>
                <button id="addEdge" data-ng-click="updateE(newEdge)">Add</button>
                
            </div>
            
        </div> 

        <div data-custom-dir="" id="graph" data="graph.data" options="graph.options"></div>
        <div>
            <h3>Monitor The Changes</h3>
            <div class="node">
                <h4>Nodes:</h4>
                <div class="col">
                    <div id="nodes">
                        <pre>{{newNode | json}}</pre>
                        <pre>{{arrNode | json}}</pre>
                    </div>
                </div>
            </div>
            <div class="node">
                <h4>Edges:</h4>
                <div class="col">
                    <div id="edges">
                        <pre>{{newEdge | json}}</pre>
                        <pre>{{arrEdge | json}}</pre>
                    </div>
                </div>
            </div>
            
        </div>

    </div>
</body>

wahwahwah · Accepted Answer · 2015-03-03 19:13:43Z

You can add items to a javascript object using .push(). To make an update, you'll have to loop through the object until you find a matching id (or some other value).

Finally, you can use .appendTo() to update the section that indicates what changes have been made.

Example:

$('#addNode').click(function () {

    // pseudo code to add item to javascript object:
    // 'node' would be presumably nested based on the OP, 
    // but information on js object name is not provided

    var nodeId = $('#idNode').val();
    var nodeLabel = $('#label').val();
    var nodeLevel = $('#level').val();

    nodes.push({
        "id": nodeId,
            "label": nodeLabel,
            "level": nodeLevel,

    });

    // psudeo code for updating js object
    // loop through object to find matching id:

    var locate = 0;
    for (var i = 0; i < nodes.length; i++) {
        if(node[i].id == nodeId){
            locate = i;
            node[i].label = nodeLabel;
            node[i].level = nodeLevel;
        }
    }

    // Adding results to element

    var nodesElem = $('#nodes');
    var addElem = "<pre> { newNode | " + JSON.stringify(node[locate]) + " }";

    addElem.appendTo(nodesElem);

});

Ali Vojdanian · Accepted Answer · 2015-03-05 13:16:35Z

0

If you need it to be able to change existing records try :

$scope.graph.data.nodes[$scope.newNode.id] = $scope.newNode;

and

 $scope.graph.data.edges.push($scope.newEdge);

These methods function calls should update the existing data with the newNode and the newEdge

edited Mar 5, 2015 at 13:16

Ali Vojdanian

2,1232 gold badges32 silver badges49 bronze badges

answered Mar 3, 2015 at 19:37

Davis

1,1617 silver badges8 bronze badges

Collectives™ on Stack Overflow

Update json file based on input values using AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related