AngularJS: How to load JSON data onto a scope variable

Question

I\'m creating a personal website where I can keep updating content without having to manipulate the HTML. I\'m trying to achieve this by simply loading and updating

Answer 1

var myapp=angular.module('mainApp',[]);
myapp.controller('mainController',function($scope,$http){
    $scope.content = null;
    $http({method: 'GET', url: 'mainContent.json'}).
        success(function(data, status, headers, config) {
            $scope.contents=data;
        }).error(function(data, status, headers, config) {          
    });
});

Published in Web Server and added Mime type for .json. It worked.

Answer 2

Change your mainController.js and JSON files as follows. Here i'm using wamp server as my local server.

var myapp = angular.module('mainApp', []);
myapp.controller('mainController', function($scope, $http) {
  $http.get('http://localhost/stackoverflow/angular/test1/database.json').success (function(data) {
    $scope.contents = data.records;
  })
});

JSON File:

{
 "records":
 [
    {"heading":"MyHeading","description":"myDescription"}
 ]
}

Answer 3

Your json file has an array with the first and only element in the array being a json object. When .success() fires, and data is passed into the lambda function, data is an array, not just json. All you have to do is access the zeroth element of the array.

So this:

.success(function(data) {
    $scope.contents = data;
})

Should be this:

.success(function(data) {
    $scope.contents = data[0];
})

---

Also, you should check data[0] to make sure that it's json, and if it doesn't validate, you should probably call parseJSON(data[0]) on it.

Answer 4

Modified Your Method Use this and Check output.

var myapp=angular.module('mainApp',[]);
myapp.controller('mainController',function($scope,$http){
    $scope.content = null;
    $http.get('urlpath'}).
        success(function(data, status, headers, config) {
            $scope.contents=data;
        }).error(function(data, status, headers, config) {          
    });
});

or Another Good Practice I see

Use Factory Service Method:-

angular.module('mainApp').factory('Myservice', function($http){
    return {
        getdata: function(){
              return $http.get('url'); // You Have to give Correct Url either Local path or api etc 

        }
    };
});

Inject above service to Controller

Controller :-

angular.module('mainApp',[]).controller('mainController',function($scope,Myservice){
        $scope.content = null;
         Myservice.getdata().success(function (data){
                       alert('Success');
                   $scope.content=data[0]; // as per  emilySmitley Answer which is Working Good

                 });
    });

Let Me Know if You have any Questions . Good Luck

Answer 5

I don't know if you have still been able out the solution or not. If not, do try this. When using localhost server, the server is unable to locate the json files. To solve this problem, just rename your file to mainContent.txt, apart from that, your code is perfect. But do remember that this is only for development phase, once you plan to deploy the site live, change back to .json file.

updated $http request :-

$scope.contents = null;
$http.get('mainContent.json')
    .success(function(data) {
        $scope.contents=data;
    })
    .error(function(data,status,error,config){
        $scope.contents = [{heading:"Error",description:"Could not load json   data"}];
    });