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>"
   }
]

But my concern is it includes 0 <div>, p tag etc, which I already have in my mobile app. I need only data to be displayted. Is it the right way? — Smitha
– Smitha, Commented May 5, 2016 at 6:27
Did not get you! can you please give some examples? Sorry being a newbee! — Smitha
– Smitha, Commented May 5, 2016 at 6:30
@Smitha You want to get event_date as Tuesday, May 31, 2016 or with HTML?? — Jenson M John
– Jenson M John, Commented May 5, 2016 at 6:39
no HTML. I do not need HTML! So I am asking if the Drupal response is incorrect? I should ask Drupal dev to provide me correct JSON? — Smitha
– Smitha, Commented May 5, 2016 at 6:43

Jenson M John · Accepted Answer · 2016-05-05 07:22:14Z

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

edited May 5, 2016 at 7:22

answered May 5, 2016 at 6:57

Jenson M John

5,7195 gold badges32 silver badges48 bronze badges

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

5 Comments

Smitha Over a year ago

Thank you! How can i test the samething in my local (I have nodejs server), by using a simple json or text file?

Jenson M John Over a year ago

@Smitha Haven't worked with node.js. Need to Check

Smitha Over a year ago

yes. Say, I want to test $http request resposne and app logic.. but for that my server is not ready yet with REST APIs. But i have local JSON data. To test it

Jenson M John Over a year ago

@Smitha See this Fiddle jsfiddle.net/jenson555/k9y0kk3z Here For testing, I just assigned your JSON to a variable. You can see $http AJAX call had been Commented. Similar way assign your whole JSON to a variable & Parse accordingly.

Smitha Over a year ago

Thanks! That helped!

Collectives™ on Stack Overflow

How to parse Drupal JSON data in angularjs app

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related