如何在 angularjs 应用程序中解析 Drupal JSON 数据答案

【问题标题】：How to parse Drupal JSON data in angularjs app如何在 angularjs 应用程序中解析 Drupal JSON 数据
【发布时间】：2016-05-05 06:21:12
【问题描述】：

我从 Drupal rest api 获得了以下 JSON 响应。如何在我的移动应用程序中解析它 - AngularJs http 服务？

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

【问题讨论】：

但我担心的是它包含 0
、p 标签等，这些我已经在我的移动应用程序中拥有了。我只需要显示数据。方法对吗？
使用原生JSON.parse
没有得到你！你能举一些例子吗？对不起，我是新手！
@Smitha 你想得到event_date 为Tuesday, May 31, 2016 或HTML??
没有 HTML。我不需要 HTML！所以我问 Drupal 响应是否不正确？我应该请 Drupal 开发人员为我提供正确的 JSON？

标签： javascript angularjs json drupal drupal-7

【解决方案1】：

例如。

控制器

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, '') : '';
   }
  });

查看

<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>

见Fiddle

【讨论】：

谢谢！如何使用简单的 json 或文本文件在本地（我有 nodejs 服务器）中测试相同的东西？
@Smitha 没有与node.js 合作过。需要检查
是的。说，我想测试 $http 请求响应和应用程序逻辑.. 但为此我的服务器还没有准备好使用 REST API。但我有本地 JSON 数据。测试一下
@Smitha 看到这个 Fiddle jsfiddle.net/jenson555/k9y0kk3z 这里为了测试，我刚刚将你的 JSON 分配给了一个变量。可以看到$http AJAX 调用已被评论。类似的方式将你的整个 JSON 分配给一个变量并相应地解析。
谢谢！这有帮助！