Json object not rendering in MVC view

Question

I am having trouble passing JSON object to my view. I am using angular to later bind the data to my view. But when I execute the page, the table in blank. Please see the code below

Code in my view

<div class="container" ng-init="courses = @Html.Raw(Model)">

    <div class="row">
        <div class="span10">
            <table class="table table-condensed table-hover">
                <tr>
                    <th>Course</th>
                    <th>Course Name</th>
                    <th>Instructor</th>

                </tr>
                <tr ng-repeat="course in courses">
                    <td>{{course.number}}</td>
                    <td>{{course.name}}</td>
                    <td>{{course.instructor}}</td>
                </tr>
            </table>
        </div>
    </div>

</div>

Code in my controller

 public class CoursesController : Controller
    {
        // GET: Hello
        public ActionResult Index()
        {
            return View("Index", "", GetSerialisedCourseVm());
        }

        public string GetSerialisedCourseVm()
        {
            var courses = new[]
            {
                new CourseVM {Number= "100", Name= "Physis", Instructor = "Abc"},
                new CourseVM {Number= "101", Name= "Chemistry", Instructor = "test"},
                new CourseVM {Number= "102", Name= "Biology", Instructor = "Mac"},
                new CourseVM {Number= "103", Name= "History", Instructor = "Jack"},
                new CourseVM {Number= "104", Name= "Maths", Instructor = "Ren"}

            };
            var settings = new JsonSerializerSettings{ContractResolver = new CamelCasePropertyNamesContractResolver()};
            return JsonConvert.SerializeObject(courses, settings);
        }

    }

    public class CourseVM
    {
        public string Number { get; set; }
        public string Name { get; set; }
        public string Instructor { get; set; }
    }

when i do an F12 i can see the following error

angular.min.js:62 Error: Unexpected end of expression: courses = [{
    at Error (native)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:67:426)
    at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:71:164)
    at A (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:70:288)
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:70:204)
    at x (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:70:70)
    at t (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:69:454)
    at s (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:69:384)
    at p (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:69:321)
    at o (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:69:251) <div class="container" ng-init="courses = [{" number":"100","name":"physis","instructor":"Abc"},{"number":"101","name":"chemistry","instructor":"test"},{"number":"102","name":"biology","instructor":"Mac"},{"number":"103","name":"history","instructor":"Jack"},{"number":"104","name":"maths","instructor":"Ren"}]"="">

Using the unminified version of angular

angular.js:13294 Error: [$parse:ueoe] Unexpected end of expression: courses = [{
http://errors.angularjs.org/1.5.2/$parse/ueoe?p0=courses%20%3D%20%5B%7B
    at http://localhost:81/Scripts/angular.js:68:12
    at Object.AST.peekToken (http://localhost:81/Scripts/angular.js:13895:13)
    at Object.AST.object (http://localhost:81/Scripts/angular.js:13851:14)
    at Object.AST.primary (http://localhost:81/Scripts/angular.js:13769:22)
    at Object.AST.unary (http://localhost:81/Scripts/angular.js:13757:19)
    at Object.AST.multiplicative (http://localhost:81/Scripts/angular.js:13744:21)
    at Object.AST.additive (http://localhost:81/Scripts/angular.js:13735:21)
    at Object.AST.relational (http://localhost:81/Scripts/angular.js:13726:21)
    at Object.AST.equality (http://localhost:81/Scripts/angular.js:13717:21)
    at Object.AST.logicalAND (http://localhost:81/Scripts/angular.js:13709:21) <div class="container" ng-init="courses = [{" number":"100","name":"physis","instructor":"Abc"},{"number":"101","name":"chemistry","instructor":"test"},{"number":"102","name":"biology","instructor":"Mac"},{"number":"103","name":"history","instructor":"Jack"},{"number":"104","name":"maths","instructor":"Ren"}]"="">

Output of @Html.Raw(Model) in the view

[{"number":"100","name":"Physis","instructor":"Abc"},{"number":"101","name":"Chemistry","instructor":"test"},{"number":"102","name":"Biology","instructor":"Mac"},{"number":"103","name":"History","instructor":"Jack"},{"number":"104","name":"Maths","instructor":"Ren"}]

The controller you have is very obviously a C# controller that handles some things server-side, but in Angular, you should also have controller/module files for your individual view, directives, etc. Specifically, you use ng-init="courses = @Html.Raw(Model) to attempt to set courses in your scope to iterate over, but you have no controller for the scope to exist with. Also, you posted a stacktrace from minified Javascript. Minified JS is particularly difficult to read through, and this is partly intentional. — Harris
– Harris, Commented Mar 25, 2016 at 15:41
I have added the new error log after using the unminified version of angular. Are you sure you need to use angular controller for displaying it — Tom
– Tom, Commented Mar 25, 2016 at 15:54
Actually, looking at what you have, the issue may not even be a missing Angular controller. Here's a test I'd like you to do- have the result of @Html.Raw(Model) displayed directly in the view. It looks to me like you're working with either an incomplete or uncompatibly-formatted result. — Harris
– Harris, Commented Mar 25, 2016 at 16:02

Harris · Accepted Answer · 2016-03-25 16:34:23Z

1

The solution is simply to replace all the " marks with ' marks.

In your output for model, you have this:

[{"number":"100","name":"Physis","instructor":"Abc"},{"number":"101","name":"Chemistry","instructor":"test"},{"number":"102","name":"Biology","instructor":"Mac"},{"number":"103","name":"History","instructor":"Jack"},{"number":"104","name":"Maths","instructor":"Ren"}]

The " marks there are ending the ng-init attribute, causing it to only see ng-init="courses = [{".

edited Mar 25, 2016 at 16:34

answered Mar 25, 2016 at 16:25

Harris

1,78516 silver badges19 bronze badges

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

2 Comments

Tom Over a year ago

Hi read your comment. How do I replace the double Quotes to single quotes, In codebehind it doesnt allow me to use single quotes

Harris Over a year ago

I'd suggest stringifying it and just doing a string replace on that.

Joe Lloyd · Accepted Answer · 2016-03-25 15:11:56Z

0

Data Flow

Factory

set up a factory to get your data (where data is your JSON array)

.factory('homeFactory', [ function(){
    return{
      getData: function(){
        return data
      }
    };
}]);

Controller

then in your controller you must use your factory

.controller('homeCtrl', [ '$scope','homeFactory', function($scope, homeFactory){

  $scope.data = {};

  homeFactory.getData().then(function(res){
    $scope.data= res.data;
  });

}]);

View

then in your view

just throw the curly bracket notation in a for each (this assumes that name is a json key in your array) or you can just print out data

<div ng-repeat="value in data">
   {{value.name}}
</div>

please ask if there is something unclear and I will update this answer.

answered Mar 25, 2016 at 15:11

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

4 Comments

Tom Over a year ago

I understand we can do it using the factory method. But what is the problem in my code above. It should still be achievable right. I need to know how to do it with ng-init

Joe Lloyd Over a year ago

var courses = new[] should be var courses = new[]; and you should use the method .push() to populate it.

Tom Over a year ago

Isnt push a javascript method. I am initialising my array in c# code behind controller

Joe Lloyd Over a year ago

Ah right. Sorry didnt see that. My mistake. Good luck

Collectives™ on Stack Overflow

Json object not rendering in MVC view

2 Answers 2

2 Comments

Data Flow

Factory

Controller

View

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Data Flow

Factory

Controller

View

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related