0

I would like to clean up my AngularJS code a bit. Right now, I have my JSON arrays in the JS file under $scope.[array] and there are 5 groups. Can I put all of them in 1 separate JSON file or do I need multiple files for each array? If I put them in one JSON file, can I still access them via $http.get()?

Here is the JS code with JSON data:

var reportApp = angular.module('reportApp', ['ui.bootstrap']);

reportApp.controller('reportController', function($scope) {
    $scope.head = [
                   {id: 1, name: 'Application Name', class: 'filtersearch'},
                   {id: 2, name: 'Date Created'},
                   {id: 3, name: 'Date Updated'},
                   {id: 4, name: 'Payload'},
                   {id: 5, name: 'Status', class: 'filtersearch'},
                   {id: 6, name: 'Error Code', class: 'filtersearch'},
                   {id: 7, name: 'Error Description'}
                   ];

    $scope.details = [
                      {id: 1, name: 'Application Name'},
                      {id: 2, name: 'Error Description'},
                      {id: 3, name: 'Record Count'},
                      {id: 4, name: 'Record Fail'}
                      ];

    $scope.status = [
                     {id: 1, name: 'Active'},
                     {id: 2, name: 'Inactive'},
                     {id: 3, name: 'Unknown'}
                     ];

    $scope.errorCode = [
                        {id: 1, name: 'Code01'},
                        {id: 2, name: 'Code02'},
                        {id: 3, name: 'Code03'},
                        {id: 4, name: 'Code04'}
                        ];

    $scope.apps = [
                   {appName: 'App01',
                       dateCreated: '01/01/2015',
                       dateUpdated: '01/04/2015',
                       payload: 'Payload01',
                       status: $scope.status[0],
                       errorCode: $scope.errorCode[0],
                       errorDesc: 'Desc01',
                       recordCount: 1,
                       recordFail: 1},
                   {appName: 'App01',
                       dateCreated: '01/02/2015',
                       dateUpdated: '01/05/2015',
                       payload: 'Payload02',
                       status: $scope.status[0],
                       errorCode: $scope.errorCode[1],
                       errorDesc: 'Desc02',
                       recordCount: 1,
                       recordFail: 2},
                   {appName: 'App03',
                       dateCreated: '01/03/2015',
                       dateUpdated: '01/06/2015',
                       payload: 'Payload03',
                       status: $scope.status[1],
                       errorCode: $scope.errorCode[2],
                       errorDesc: 'Desc03',
                       recordCount: 2,
                       recordFail: 1}
                  ];
});

I was hoping to use $http.get() in a similar fashion to the below code, but for multiple arrays:

var report = this;
report.apps = [];
$http.get('apps.json').success(function(data){
    report.apps = data;
});

Any input is much appreciated!

EDIT: Here is the JS Fiddle.

var report = this;
report.apps = [];
$http.get('../controllers/apps.json').success(function(data){
    for (head in data) {
        report.head = data.head;
    }
    for (details in data) {
        report.details = data.details;
    }
    for (status in data) {
        report.status = data.status;
    }
    for (errorCode in data) {
        report.errorCode = data.errorCode;
    }
    for (apps in data) {
        report.apps = data.apps;
    }
});
annabananana7
  • 181
  • 7
  • 18
  • 3
    Just to be pedantic, those are JavaScript arrays, not JSON arrays. JSON is a serialization format. Those are simple array literals, plain native JavaScript. – Pointy Mar 25 '15 at 18:46

1 Answers1

2

You could put them under a single object:

{ head : [
               {id: 1, name: 'Application Name', class: 'filtersearch'},
               {id: 2, name: 'Date Created'},
               {id: 3, name: 'Date Updated'},
               {id: 4, name: 'Payload'},
               {id: 5, name: 'Status', class: 'filtersearch'},
               {id: 6, name: 'Error Code', class: 'filtersearch'},
               {id: 7, name: 'Error Description'}
               ],
 details : [
                  {id: 1, name: 'Application Name'},
                  {id: 2, name: 'Error Description'},
                  {id: 3, name: 'Record Count'},
                  {id: 4, name: 'Record Fail'}
                  ]
}

Then iterate that object, and assign to store:

$http.get('../store-products.json').success(function(data){
    for (key in data) {
        store[key] = data[key];
    }
});
eladcon
  • 5,815
  • 1
  • 16
  • 19
  • same way, just assign to scope: `$scope[key] = data[key];` – eladcon Mar 25 '15 at 19:38
  • Is there a way to not use `$scope`? – annabananana7 Mar 25 '15 at 19:46
  • its either $scope or the controller as method: http://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification.. if you dont have access to scope, return a promise and use `then` where you do have access. see this: https://docs.angularjs.org/api/ng/service/$q – eladcon Mar 25 '15 at 19:49
  • I do have access to `$scope` so I could use that. Am I replacing `key` with anything specific from my data? I added my JS Fiddle (the modal doesn't work though) so you can see what I am trying to do. – annabananana7 Mar 25 '15 at 20:06
  • Sorry, would you mind checking my code please? I don't think I'm getting it. – annabananana7 Mar 26 '15 at 19:55
  • i think we missunderstand each other. didn't you want to put all of the arrays in one file? i showed you a possible way. put all of the arrays under one object as i've shown in the example, and then on the `$http` you could store those arrays in $scope just like ive written (only change store to $scope) – eladcon Mar 26 '15 at 21:03
  • I have the arrays in a separate json file (apps.json). I just don't think I have the `$http.get()` function right. Do I still use `var report = this;` and the `for` loops? – annabananana7 Mar 26 '15 at 21:17
  • yeah, just replace store with report – eladcon Mar 26 '15 at 21:34
  • Ok, I think I understand, but I don't think my code is working. Would you mind taking a look at the edit for `var report = this`? – annabananana7 Mar 26 '15 at 22:24
  • can you update the fiddle with the last code? i dont think it reflects your situation – eladcon Mar 26 '15 at 22:54
  • just add it as an object like in the file – eladcon Mar 27 '15 at 20:47
  • 1
    My JSON data wasn't loading because I wasn't using double quotes. The data is loaded now, but some of my data uses $scope and won't load so I'll have to open a new question to resolve that. Thanks for your help! – annabananana7 Mar 27 '15 at 20:54