I'm very new to both web development and AngularJS. I am trying to write a web page that will automatically update its info based on JSon files sitting on my server. I can get the json data but I can't seem to parse the data ing in. I validated the json data just to make sure I was writing it correctly, but whenever I display it on the site is just displays as a single string. I am not able to access the individual members. My factory and controller are below. Any help would be greatly appreciated!!

var MyController = function($scope, $log, MyFactory) {
    $scope.notes =[];

function init() {
    MyFactory.getNotes()
        .success(function(notes){
            $scope.notes = JSON.parse(notes);
        })
        .error(function(data, status, headers, config) {
                $log.log(data.error + ' ' + status);
            });
}

    init();

angular.module('MyApp')
    .controller('MyController', MyController);
};

And the factory:

    var MyFactory = function($http) {
    var factory = {};
    factory.getNotes = function() {
        return $http.get('/ci/data.json');
    };
return factory;
};

angular.module('MyApp').factory('MyFactory', 
                                    MyFactory);

I admit the code and question is crude but I've just started. Any additional help on architecture and style would be appreciated as well! Thanks in advance!

I'm very new to both web development and AngularJS. I am trying to write a web page that will automatically update its info based on JSon files sitting on my server. I can get the json data but I can't seem to parse the data ing in. I validated the json data just to make sure I was writing it correctly, but whenever I display it on the site is just displays as a single string. I am not able to access the individual members. My factory and controller are below. Any help would be greatly appreciated!!

var MyController = function($scope, $log, MyFactory) {
    $scope.notes =[];

function init() {
    MyFactory.getNotes()
        .success(function(notes){
            $scope.notes = JSON.parse(notes);
        })
        .error(function(data, status, headers, config) {
                $log.log(data.error + ' ' + status);
            });
}

    init();

angular.module('MyApp')
    .controller('MyController', MyController);
};

And the factory:

    var MyFactory = function($http) {
    var factory = {};
    factory.getNotes = function() {
        return $http.get('/ci/data.json');
    };
return factory;
};

angular.module('MyApp').factory('MyFactory', 
                                    MyFactory);

I admit the code and question is crude but I've just started. Any additional help on architecture and style would be appreciated as well! Thanks in advance!

• javascript
• json
• angularjs
• http

• Can you give an example of the json response? – rom99 Commented Apr 20, 2014 at 7:54
• For example, [{"name":"matt","age":32},{"name":"dave","age":29}]. It would print it out just like that. If I sent that to the $scope then tried accessing say, name, it would work. It will only print out the entire string. – Edited Content Commented Apr 20, 2014 at 7:58
• Do you have quotes around the whole thing in the data.json file? That would make the whole thing just one json string I guess. – rom99 Commented Apr 20, 2014 at 8:07
• Also I think Angular should be parsing the json itself if it detects the response is json data, so you wouldn't need to do the manual JSON.parse. A quick way to see what's going in would be to try console.log(notes) in your success function and see what actually gets passed (a string or an object) – rom99 Commented Apr 20, 2014 at 8:12
• Nope. I just have it around the methods and variables – Edited Content Commented Apr 20, 2014 at 8:13

4 Answers 4

1. You don't need to parse the response as json. If the sourcefile is giving you valid json, angular knows its json.

2. In your controller, try to console.log($scope.notes). If using google chrome, you get the json results pretty printed in the console you know your factory is working.

3. Use an angular forEach to iterate through the result to do something with it.

   angular.forEach($scope.notes, function(note) {
       console.log(note);
   });
   

You can use angular.fromJson(jsondata) to parse http result. Previously i was getting invalid json data from http response, some "\ characters were there in the json data so i parsed using this and it worked for me, it removed all those invalid characters from my json data.

No Need to parse.. just use your $scope.notes in you loop

<div ng-repeat="note as notes">
    <p>{{name}}</p>
    <p>{{age}}</p>
</div>

For those of you who may still need this, Suresh's answer is in the right direction but that code was quite wrong (at least for Angular 1)

So whilst trying to parse data such as:

{"1":{"id":"1","owner":"1","name":"Server","description":"This is my test server.","version":"1.11","type":"0","ip":"test.","port":"25565"},"2":{"id":"2","owner":"1","name":"Test Server","description":"This is my test server.","version":"1.0","type":"2","ip":"test.","port":"25565"}

I used the following GET request:

.controller('serversController', function($scope, $http){
  $http.get("/dashboard/api/?action=getServers&key=")
  .then(function(response){
    $scope.servers = response.data;
  });
});

and the following HTML:

<div ng-repeat="server in servers">
    <p>{{server.id}}</p>
    <p>{{server.name}}</p>
    <p>{{server.version}}</p>
</div>