How do I display JSON data in an AngularJS single page app?

Question

I'm new to AngularJS and JS based web development, and I'm trying to make my portfolio site as a single page AngularJS application. I want to put all of my previous project data in a JSON file and use JS to grab the data and display it dynamically in an HTML list or table. I've tried doing a lot of research on this, but it's not working. My code is posted below.

myApp.controller('portController', function($scope, $http){
    
    $scope.test = "TEST PHRASE";
    
    $http.get('../projects.json').success(function(data) {
       $scope.projects = data;
   });

});

<div class="jumbotron text-center">
 <h1>Portfolio Home</h1>
    
    <p>{{ test }}</p>
    
    <table>
        <tr ng-repeat="project in projects">
            <td>{{project.title}}</td>
            <td>{{project.date}}</td>
        </tr>
    </table>
    
</div>

[
{
    "title" : "Sample Title", 
    "date" : "01/01/2001"
},
{
    "title" : "Sample Title 2", 
    "date" : "02/02/2002"
}
]

NOTE: I have a JS file that controls what is displayed on the page based on the URL (it handles all routing), and I am using ng-view and changing the controller to use the html above when on a certain page. The {{test}} bit worked fine until I added in the http request.

I don't get an error, it just breaks as if the entire controller file is being ignored. — Austin McGlothlin, Mar 10 '18 at 20:08
Could you open the JS console (Right click -> Inspect element -> Console) and then try again? We need that error to understand what's going on. — Technohacker, Mar 10 '18 at 20:11
Just one question where is the ng-app and ng-controller in your HTML ??? — BASEER HAIDER JAFRI, Mar 10 '18 at 20:12
@AustinMcGlothlin , did you add controller to tag enclosing that div.. https://codepen.io/nagasai/pen/dmPEGG — Naga Sai A, Mar 10 '18 at 20:13
@BASEERHAIDERJAFRI my index.html file has the ng-app and ng-controller tag. My app.js file handles routing and based on the URL changes what controller and html files is being used. The code above is from the specific html and js controller that it's referencing. This setup works for all of my other pages. It worked for this code as well until i tried to a http.get the JSON file. — Austin McGlothlin, Mar 10 '18 at 20:29
@K3v1n, sorry I'm very new to web dev. The error I'm getting is "TypeError: @http.get(...).success is not a function. — Austin McGlothlin, Mar 10 '18 at 20:30
the problem is with `.success()`, it has nothing to do with your data. See https://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6 — Claies, Mar 10 '18 at 20:47
@NagaSaiA thank you, that got rid of all the errors and the {{test}} bit works now, but none of my JSON data is being displayed. It looks like the ng-repeat is making several empty rows in the table though, and more than necessary. — Austin McGlothlin, Mar 10 '18 at 21:10
@Claies thank you for the info. See what I sent NagaSaiA above, please — Austin McGlothlin, Mar 10 '18 at 21:10
@NagaSaiA I'm sorry, I don't completely understand. There is absolutely nothing in my console. — Austin McGlothlin, Mar 10 '18 at 21:19
@AustinMcGlothlin, $scope.projects = response.data, will display table correctly, as posted below..Hope it works — Naga Sai A, Mar 10 '18 at 21:21

score 0 · Accepted Answer · answered Mar 10 '18 at 21:20

To achieve expected use below option

Change .success to .then , as .success is valid upto to Angularjs 1.4
To render with ng-repeat, use $scope.projects = response.data , as shown below

    var myApp = angular.module('test',[]);
    
    myApp.controller('portController', function($scope, $http){
            $http({
                method: 'get', 
                url: '../projects.json'
            }).then(function (response) {
                $scope.projects= response.data;
            },function (error){
                console.log(error);
            });
    });

How do I display JSON data in an AngularJS single page app?

1 Answers1