How do display json data in view using Angular

Question

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?

jfplataroti · Accepted Answer · 2013-07-17 17:06:00Z

2

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!

answered Jul 17, 2013 at 17:06

jfplataroti

6614 silver badges12 bronze badges

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

1 Comment

Milligran Over a year ago

I have tried that before. I changed the question to show that I have tried that

Collectives™ on Stack Overflow

How do display json data in view using Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related