javascript angularjs json angular-schema-form

Angular Schema Form Load Data from JSON

I'm an hardware engineer trying to create an in-house software tool. I thought that I would be able to do so quite easily, but there are a few too many unknowns for me to progress.

I'm trying to create an in-house software solution for managing orders. I have defined a JSON Schema that is valid.

I want to set up a webpage where I can create a new order by filling out a web form. The data should then be stored as a JSON text file. I also want to be able to load a JSON text file, pre-populate the form with the current values, make some changes, and then save the changes.

I've done similar things in php and mysql, but I want to use JSON files to be able to make changes to the software tool without having to fiddle around with a database structure. I also see it as a good learning opportunity.

I'm trying to use auto generated forms (schemaform.io), and I've gotten the following code to work:

<!DOCTYPE html>
<html >

  <head>    

  </head>

  <body ng-app="test" ng-controller="FormController">

    <form name="ngform"
          sf-schema="schema"
          sf-form="form"
          sf-model="model"></form>

<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>		  

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>		  


</script>
 
<script>

/*
$.getJSON("data/order.json", function(orderTemplateJson) {
    console.log(orderTemplateJson); // this will show the info it in firebug console
	$scope.$broadcast('schemaFormRedraw')
});
*/

var app = angular.module('test',['schemaForm']);
app.controller('FormController', function($scope,$http){
   $scope.schema = {
   // A long long string of text goes here
};

  $scope.form = [
    "*",
    {
      type: "submit",
      title: "Save"
    }
  ];

  $scope.model = {};
})
    </script>

  </body>

</html>

I now want to load the JSON schema from a file. I tried to move the code into the callback of a getJSON call, but I got the following error message:

Uncaught Error: [$injector:modulerr] Failed to instantiate module test due to: Error: [$injector:nomod] Module 'test' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

$.getJSON("data/order.json", function(orderTemplateJson) {
    console.log(orderTemplateJson); 
  
    //Moved all the angular module code to here
});

I've tried various things, but the problem is likely that I don't really know what I'm doing.. Any help would be greatly appreciated.

Also, does anyone have any pointers on how I can pre-load the form with data from a JSON-file that contains data (and fits the schema)?

Thank you..

/ Martin

Solution

While using angular it's good to do things the angular way. So first thing is that you should use angular's $http to load file instead of jQuery's $.getJSON. So in your controller you can do:

app.controller('FormController', function($scope,$http){
   $http.get("data/order.json").then(
      function success(response) {
        // please note that as this is asynchronous, 
        // the $scope.schema will be available after response
        // has been received but this should be ok
        $scope.schema = angular.fromJson(response.data);
      },
      function error(response) { /* handle error */ });
   // do other stuff
});

then angular $http API reference will be helpful

there are other things to consider using angular however it's worth to invest some time to familiarize with the angular way and benefit from it relatively quickly.

Even more helpful would be to use $resource instead of $http as it is dedicated to deal with json (and REST actually).