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

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
– Austin McGlothlin, Commented Mar 10, 2018 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
– Technohacker, Commented Mar 10, 2018 at 20:11
Just one question where is the ng-app and ng-controller in your HTML ??? — BASEER HAIDER JAFRI
– BASEER HAIDER JAFRI, Commented Mar 10, 2018 at 20:12
@AustinMcGlothlin , did you add controller to tag enclosing that div.. codepen.io/nagasai/pen/dmPEGG — Naga Sai A
– Naga Sai A, Commented Mar 10, 2018 at 20:13

Naga Sai A · Accepted Answer · 2018-03-10 21:20:15Z

0

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);
            });
    });

answered Mar 10, 2018 at 21:20

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related