Displaying JsonResult with Angular.js

Question

I am familiarizing myself with angular.js and it seems pretty easy returning Json Data from a file by using $Http.Get.

In an example I would have get my json data like this

var artistControllers = angular.module('artistControllers', []);

    artistControllers.controller('ListController', function ($scope, $http) {
    $http.get('json/jsonAngular.txt').success(function (data) {
    $scope.artists = data;
  });
});

How would I get a JsonResult and assign this to my $scope.artists for example.

    [HttpPost]
    public JsonResult GetArtists()
    {
        ViewModel model = new ViewModel();
        model.GetArtists();
        return Json(new
        {
            Artists = model.Artists
        });
    }

where my class would look like this as an example

 public class Artist
{
    public string Initial { get; set; }
    public string Surname { get; set; }
}

Is there perhaps a working example of where I could return a JsonResult and render it in my html.

You dont have too. JSON Data 1:1 javascript objects. So your json data is already bound as object in the scope.artists and accessable in this scope like in answer 1. — Rene M.
– Rene M., Commented Jan 7, 2015 at 15:55

Ali Habibzadeh · Accepted Answer · 2015-01-07 16:14:29Z

2

It will be like:

var artistsApp = angular.module('artistsApp', []);

artistsApp.controller('ListController', function ($scope, $http) {
    $http.get('api/getartists').success(function (data) {
         $scope.artists = data.artists;
    });
});

<ul>
  <li ng-repeat="artist in artists">{{ artist.Surname }}</li>
</ul>

If json/jsonAngular.txt is returning your json then rest of your code is code. you can simply access it in a ng-repeat like above.

Also remember that you need to associate your view to your controller. This is done usually inside your app.js config section.

$routeProvider
            .when('/', {
                controller: 'artistControllers',
                templateUrl: 'artists.html'
            })

Note: It's best practice to abstract out data access out of your controller into a service so you can reuse your data access calls.

edited Jan 7, 2015 at 16:14

answered Jan 7, 2015 at 15:54

Ali Habibzadeh

11.6k4 gold badges56 silver badges79 bronze badges

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

2 Comments

Arianule Over a year ago

Thanks. I would however make a serverside call to get the data and not get it from a file. How would I change this line $http.get('json/jsonAngular.txt') if the call is made to a database? by using the conttroller method public JsonResult GetArtists()

Ali Habibzadeh Over a year ago

It will be the same if you make a GET call to your server. You would use the $http service. Just your code will be cleaner if its in a separate service and you inject your datacontext server which has a getArtists() method which then returns the promise of your ajax.

Robert Levy · Accepted Answer · 2015-01-07 15:57:40Z

2

Instead of $scope.artists = data; you want $scope.artists = data.artists;

answered Jan 7, 2015 at 15:57

Robert Levy

29.1k6 gold badges65 silver badges96 bronze badges

Collectives™ on Stack Overflow

Displaying JsonResult with Angular.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related