CODEWITHSUNDEEP
asp.net-mvcangularjscoffeescript
Milligran
Milligran

Reputation: 3171

How do display json data in view using Angular

I am learning Angularjs and trying to implement it in my C# web MVC application for the first time.

I am unable to get json format data returned from my controller to display in my view which uses Angular/Razor for data purposes

In my C# controller I return json data to my coffe scrip/js

public ActionResult Load (string id){
//data retrieved from model and formatted in json here
return Json(jsonData ,JsonRequestBehavior.AllowGet);

In My coffee script I have:

define ['test'], (app) ->
     ($scope, $http, $location) ->
        $scope.vData = (id) ->
            $.ajax
                url: 'Mobile/Load?id=1237'
            .done (response) -> 
                alert response
                $scope.vdata = [response]
                $scope.$apply() unless $scope.$$phase

When I launch the application the view has an alert button that I used to test If I can see the data from the json response:

The alert shows data in the following format:

{
   "versions":{
      "is_live":"true",
      "type":"multiple",
      "rendition":{
         "@name":"My Test",
         "@url":"http://test.net/location/test.m3u8",
         "@thumbnail":"http:// test.net/location/testimg/cam.png",
         "@thumbnail_update_interval":"10"
      }
   }
}

In my view I have tried to get data in a label several ways but unsuccessful:

<label>{{vdata.is_live}}</label>
<label>{{vdata.versions.is_live}}</label>
<label>{{is_live}}</label>

While debugging in my browser I noticed that json data is in a string format and not an object.

Could this be the problem?

Can someone please help me to display data in my view from the json data using Angular?

Upvotes: 0

Views: 2264

Answers (1)

jfplataroti
jfplataroti

Reputation: 661

i'll change two things. The first one if the json data is in a string format you should parse it using JSON.parse(jsondata) when you receive the data on the client.

I don't know coffee script but i'll add what is missing using javascript just to show you what i'll change :

define ['test'], (app) ->
     ($scope, $http, $location) ->
        $scope.vData = (id) ->
            $.ajax
                url: 'Mobile/Load?id=1237'
            .done (response) -> 
                alert response
                $scope.vdata = JSON.parse( [response] )
                $scope.$apply() unless $scope.$$phase

and then try:

<label>{{vdata.versions.is_live}}</label>

Let me know if it works!

Upvotes: 2

Related Questions