How to parse Drupal JSON data in angularjs app

Question

I got the following JSON resposne from Drupal rest api. How do I parse it in my Mobile app - AngularJs http service?

 [ { "nid":"2", "title":"<a href=\\"/sell/test-event-1\\">Test Event 1</a>", "field_event_list":"List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . Summery of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . ", "event_date":"<div class=\\"date-display-range\\"><span class=\\"date-display-start\\" property=\\"dc:date\\" datatype=\\"xsd:dateTime\\" content=\\"2016-05-20T00:00:00+05:30\\">Friday, May 20, 2016</span> to <span class=\\"date-display-end\\" property=\\"dc:date\\" datatype=\\"xsd:dateTime\\" content=\\"2016-05-31T00:00:00+05:30\\">Tuesday, May 31, 2016</span></div>" } ]

Answer 1

Eg.

Controller

app.controller('MyCtrlr', function ($scope, $http) {


                      $http.get("YOUR_DRUPAL_API").success(function(response){

                         //Store your JSON Response
                                 $scope.jsonResp = [  
                                                   {  
                                                      "nid":"2",
                                                      "title":"<a href=\"/sell/test-event-1\">Test Event 1</a>",
                                                      "field_event_list":"List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . Summery of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . List of Test Event 1 . ",
                                                      "event_date":"<div class=\"date-display-range\"><span class=\"date-display-start\" property=\"dc:date\" datatype=\"xsd:dateTime\" content=\"2016-05-20T00:00:00+05:30\">Friday, May 20, 2016</span> to <span class=\"date-display-end\" property=\"dc:date\" datatype=\"xsd:dateTime\" content=\"2016-05-31T00:00:00+05:30\">Tuesday, May 31, 2016</span></div>"
                                                   }
                                                ];

                       });

 });

//AngularJS filter to strip HTML tags from your JSON properties

app.filter('getPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
   }
  });

View

<table ng-controller="MyCtrlr">
                <tr>
                  <td>nid</td>
                  <td>title</td>
                  <td>field_event_list</td>
                  <td>event_date</td>
                </tr>

                <tr ng-repeat="data in jsonResp">

                                <td>{{data.nid}}
                                </td>
                                <td>{{data.title | getPlaintext}}</td>

                                <td>{{data.field_event_list | getPlaintext}} 
                                </td>
                                <td>{{data.event_date | getPlaintext}}
                                </td>

                            </tr>

</table>

See Fiddle