AngularJs push form data into json

Question

This is my app.js

volkswagenApp
        .controller('VolkswagenCtrl',
             ['$http' , function($http){
                 var vw =  this;
                 vw.gegevens = [];
                 $http.get('autos.json').success(function(data){
                 vw.gegevens = data;
                 });
            }]);

     volkswagenApp
       .controller('FormController',function(){
        this.gegevens={};
        /*this.addGegevens = function(gegeven) {
        gegeven.gegevens.push(this.gegeven);
        this.gegevens={};
        }*/

        this.addGegevens = function(gegeven){
            this.gegevens.datum = Date.now();
            vw.gegevens.push(this.gegeven);
            this.gegeven = {};
           }
          });

and this is my index.html:

   <span ng-show="show">
   <form name="inputForm" class="form-group" ng-controller="FormController as autoctrl" 
     ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)"  novalidate>
  <br>
  <p> Type: <input type="text" name="autoctrl.type" ng-model="type" style="margin-left:52px; padding-left:5px;  width:165px;" minlength="2" maxlength="10" required /></p>
    <p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="autoctrl.bouwjaar"  style="margin-left:22px; padding-left:5px;  width:165px;" minlength="4" maxlength="4" required /></p>
     <p>Km: <input type="number" name="km" ng-model="autoctrl.km" style="margin-left:60px; padding-left:5px;  width:165px;" minlength="2" maxlength="6" required /></p>
    <p>Brandstof:  <input id="select" name="brandstof" ng-model="autoctrl.brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>

    <p>Kenteken: <input type="text" name="kenteken" ng-model="autoctrl.kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>
    <p>Datum:         <input type="text" name="datum" ng-model="autoctrl.datum"  style="margin-left:40px; padding-left:5px;  width:165px;" minlength="3" maxlength="11" required  /></p>
    <p>checked: <input type="checkbox"  name="checked" ng-model="autoctrl.checked" style="margin-left:28px;" required /></p>
    <br>
    <button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>

    <div>{{inputForm.$valid}}</div>

and this is the error in the console:

    Error: Can't find variable: vw

I know that the variable W isn't defined in FormController, my question is how can i adjust the form controller so that it works. I tried everything, searched the docs. watched several tutorials and i cant find out where im going wrong. This is for a school project. Please help!

var vw = this; will be undefined, as 'this' will be undefined. — Jigar7521, Oct 17 '16 at 09:38
@Dann you want to use the `vw.gegevens` from `VolkswagenCtrl` in `FormController` right? You can simply use a service to store that data and share across controllers. Otherwise you just missed 2 lines `var vw = this;` and `vw.gegevens = [];` on your `FormController` — taguenizy, Oct 17 '16 at 09:52
@taguenizy: I had faced it in past, as 'this' will be refer current object / Element. — Jigar7521, Oct 17 '16 at 09:55
@JigarPrajapati well on the controller, as he's using, `this` will refer to the controller itself. Give a look at [this-vs-scope-in-angularjs](http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers) — taguenizy, Oct 17 '16 at 10:04
read about the usage of "vm" variable before to use. The Joel Papa's write an excellent documentation about that. You need to define in js before use, and, you're a bit confuse with usage of "this" — Joao Polo, Oct 17 '16 at 11:41

RIYAJ KHAN · Answer 1 · 2016-10-17T09:45:45.103

In the FormController add vm = this at beginning.

autoctrl.addGegevens(inputForm) and

in the addGegevens function

this.addGegevens = function(inputForm){
            this.gegevens.datum = Date.now();

            for (var formField in inputForm){
              if(inputForm.hasOwnProperty(formField)){
                  vw.gegevens.push({formField :inputForm[formField] });
              }
            }

           }

score 0 · Answer 2 · answered Oct 17 '16 at 09:38

0

It's normal. In your second controller (FormController), there is no vw var declared. You can add it as you did in the first controller :

var vw = this

answered Oct 17 '16 at 09:38

Zakaria

14,892
22
84
125

Venkatesh Konatham · Accepted Answer · 2016-10-17T11:27:43.590

You want to share VW variable to another controller. In order to do this you can use $rootScope. Please check below code which will work for you. Below is the updated span block

<span ng-show="show">
                <form name="inputForm" class="form-group" ng-controller="FormController as autoctrl" 
                      ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)" novalidate>
                    <br>

                    <p> Type: <input type="text" name="autoctrl.type" ng-model="autoctrl.gegevens.type" style="margin-left:52px; padding-left:5px;  width:165px;" minlength="2" maxlength="10" required /></p>
                    <p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="autoctrl.gegevens.bouwjaar"  style="margin-left:22px; padding-left:5px;  width:165px;" minlength="4" maxlength="4" required /></p>
                    <p>Km: <input type="number" name="km" ng-model="autoctrl.gegevens.km" style="margin-left:60px; padding-left:5px;  width:165px;" minlength="2" maxlength="6" required /></p>
                    <p>Brandstof:  <input id="select" name="brandstof" ng-model="autoctrl.gegevens.brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>

                    <p>Kenteken: <input type="text" name="kenteken" ng-model="autoctrl.gegevens.kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>
                    <p>Datum:         <input type="text" name="datum" ng-model="autoctrl.gegevens.datum"  style="margin-left:40px; padding-left:5px;  width:165px;" minlength="3" maxlength="11" required  /></p>
                    <p>checked: <input type="checkbox"  name="checked" ng-model="autoctrl.gegevens.checked" style="margin-left:28px;" required /></p>
                    <br>
                    <button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>

                    <div>{{inputForm.$valid}}</div>
                    {{ PostDataResponse}} 
                    {{autoctrl.gegevens.type}}
                    {{autoctrl.gegevens.bouwjaar}}

                </form>
            </span>

And you can find the latest app code below

var volkswagenApp = angular.module('volkswagenapp', []);


volkswagenApp.controller('VolkswagenCtrl', ['$http', '$rootScope', function ($http, $rootScope) {
        var vw = this;
        vw.gegevens = [];
        $http.get('autos.json').success(function (data) {
            vw.gegevens = data;
        });
        $rootScope.VolksWagenAppScope = vw;


    }]);

volkswagenApp.controller('FormController', ['$rootScope', function ($rootScope) {
        this.gegevens = {};
        //var vw = this;
       // vw.gegevens = [];
        /* this.addGegevens = function(gegeven) {
         gegeven.gegevens.push(this.gegeven);
         this.gegevens={};
         }*/
        this.addGegevens = function (gegeven) {
            debugger;
            this.gegevens.datum = Date.now();
            $rootScope.VolksWagenAppScope.gegevens.push(this.gegevens);
            this.gegevens = {};
        }


    }]);

Best answer yet, you can see there are line's edited to my view and no errors.. although my data isn't displaying anymore and there is nothing entered into the json file — Dann, Oct 17 '16 at 10:08
After checking your code clearly. I have seen that you have used ng-show="show" in the span tag are you sure that you set show = true. Else that block wont display — Venkatesh Konatham, Oct 17 '16 at 10:21
yes its the input field and only shows if the button is clicked — Dann, Oct 17 '16 at 10:45
Please check my answer above. I have edited the previous post and it is working now. If it helped mark is as correct answer — Venkatesh Konatham, Oct 17 '16 at 11:28
Indeed it is working, but still not putting the data into the .json file.. — Dann, Oct 17 '16 at 18:51
at least i can work further from here and i marked as correct answer as appreciation for your help.! Thanx — Dann, Oct 17 '16 at 18:52
Welcome, I didn't write code for writing into JSON file. If you have any issues with it. Let me know. — Venkatesh Konatham, Oct 18 '16 at 05:29

score 0 · Answer 4 · answered Oct 17 '16 at 10:11

Ideal way will be using a `factory' to store the results, and use that factory share data between two controller.

volkswagenApp
        .factory('gegavensFactory', function() { 
            var _gegevens = [];
            return {
                init: function(gagaves) {
                    _gegavens = gegavens;
                },
                add: function(gegaven) {
                    _gegavens.push(gegaven);
                }
            }

        )}

volkswagenApp
        .controller('VolkswagenCtrl',
             ['$http', 'gegavensFactory' , function($http, gegavensFactory){
                 $http.get('autos.json').success(function(data){
                    gegavensFactory.init(data);
                 });
            }]);

volkswagenApp
       .controller('FormController',['gegavensFactory', function(gegavensFactory){
        this.gegevens={};

        this.addGegevens = function(gegeven){
            this.gegevens.datum = Date.now();
            gegavensFactory.add(this.gegeven);
            this.gegeven = {};
        }
    }]);

AngularJs push form data into json

4 Answers4