在 iPhone 上解析时格式化 JSON 以换行

Question

我正在尝试格式化我的 JSON 文件，以便在解析时显示为带有如下换行符的段落：

This is one line.

This is a second line.

This is a third line.

我试过 \n \\n \p\n 但无济于事。

这是我想要解析文本的 iPhone 屏幕：

这是 JSON 文件。特别是 "body" 标签是我想要这样做的地方：

 {
    "id": 1,
    "jsonrpc": "2.0",
    "total": 5,
    "result": [
       {
        "id": 1,
        "guid": "1d4aa3b2-c059-4fa7-a751-9bca735e4ebb",
        "thumb": "http://skounis.s3.amazonaws.com/mobile-apps/barebone-glossy/photo-1-thumb.jpg",
        "picture": "http://skounis.s3.amazonaws.com/mobile-apps/barebone-glossy/photo-1.jpg",
        "title": "Continuing Education 2015 Class Schedule",
        "body": "October 24, 2015 from 9am - 1pm\nOctober 24, 2015 from 9am - 1pm",
        "tags": ["continuing ed"]
      }
    ]
  }

下载 JSON 的 new.service.js 文件：

(function() {
   'use strict';

    angular
     .module('barebone.news')
     .factory('newsService', newsService);

    newsService.$inject = ['$http', '$q'];

   /* @ngInject */
   function newsService($http, $q) {
     var url = 'https://s3-us-west- 2.amazonaws.com/cisnerostraininggroup/news.json';
     var result = [];

     var service = {
        all: all,
        get: get
     };
     return service;

     // *******************************************************

     // http://stackoverflow.com/questions/17533888/s3-access-control-allow- origin-header
     function all(callback){
        $http.get(url)
            .success(function(data, status, headers, config) {
                // this callback will be called asynchronously
                // when the response is available
                result = data.result;
                callback(result);
            })
            .error(function(data, status, headers, config) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
                console.log('ERROR (News):' + status);
                callback(result);
            });
        }

       function get(articleId) {
        // we take an article from cache but we can request ir from the server
         for (var i = 0; i < result.length; i++) {
            if (result[i].id === articleId) {
                return $q.when(result[i]);
            }
        }
        return $q.when(null);
       }
     }   
  })();

Answer 1

离子视图是 html 视图。所以 \n 被忽略，除非在<pre> 标签中，所以在加载数据后，迭代你的对象：

var myobject =      {
        "id": 1,
        "jsonrpc": "2.0",
        "total": 5,
        "result": [
           {
            "id": 1,
            "guid": "1d4aa3b2-c059-4fa7-a751-9bca735e4ebb",
            "thumb": "http://skounis.s3.amazonaws.com/mobile-apps/barebone-glossy/photo-1-thumb.jpg",
            "picture": "http://skounis.s3.amazonaws.com/mobile-apps/barebone-glossy/photo-1.jpg",
            "title": "Continuing Education 2015 Class Schedule",
            "body": "October 24, 2015 from 9am - 1pm\nOctober 24, 2015 from 9am - 1pm",
            "tags": ["continuing ed"]
          }
        ]
      }

myobject.result[0].body = myobject.result[0].body.replace(/(?:\r\n|\r|\n)/g, '<br />');

这会将所有出现的换行符 \n 替换为
标签并在您的 html 中正确显示。

用
替换换行符的正则表达式复制自 https://stackoverflow.com/a/784547/2303348

更新： 获取和更新结果以用

替换换行符的服务

(function() {
   'use strict';

    angular
     .module('barebone.news')
     .factory('newsService', newsService);

    newsService.$inject = ['$http', '$q'];

   /* @ngInject */
   function newsService($http, $q) {
     var url = 'https://s3-us-west-2.amazonaws.com/cisnerostraininggroup/news.json';
     var result = [];
     var nlRegex = new RegExp(/(?:\r\n|\r|\n)/g);
     var service = {
        all: all,
        get: get
     };
     return service;

     // *******************************************************

     // https://stackoverflow.com/questions/17533888/s3-access-control-allow- origin-header
     function all(callback){
        $http.get(url)
            .success(function(data, status, headers, config) {
                // this callback will be called asynchronously
                // when the response is available
                result = data.result;
                for (var i in result){
                    result[i].body = result[i].body.replace(nlRegex, "<br />");
                }
                callback(result);
            })
            .error(function(data, status, headers, config) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
                console.log('ERROR (News):' + status);
                callback(result);
            });
        }

       function get(articleId) {
        // we take an article from cache but we can request ir from the server
         for (var i = 0; i < result.length; i++) {
            if (result[i].id === articleId) {
                return $q.when(result[i]);
            }
        }
        return $q.when(null);
       }
     }   
  })();

Answer 2

{
        "id": 1,
        "jsonrpc": "2.0",
        "total": 5,
        "result": [
           {
            "id": 1,
            "guid": "1d4aa3b2-c059-4fa7-a751-9bca735e4ebb",
            "thumb": "http://skounis.s3.amazonaws.com/mobile-apps/barebone-glossy/photo-1-thumb.jpg",
            "picture": "http://skounis.s3.amazonaws.com/mobile-apps/barebone-glossy/photo-1.jpg",
            "title": "Continuing Education 2015 Class Schedule",
            "body": "October 24, 2015 from 9am - 1pm<br />October 24, 2015 from 9am - 1pm",
            "tags": ["continuing ed"]
          }
        ]
      }

Answer 3

所以我想出了如何在我的 JSON 中创建换行符。我刚刚创建了新对象，然后将这些对象添加到相应的 HTML 中。

JSON 文件：

{
  "id": 1,
  "jsonrpc": "2.0",
  "total": 5,
  "result": [
    {
        "id": 1,
        "guid": "1d4aa3b2-c059-4fa7-a751-9bca735e4ebb",
        "thumb": "http://skounis.s3.amazonaws.com/mobile-apps/barebone-glossy/photo-1-thumb.jpg",
        "picture": "http://skounis.s3.amazonaws.com/mobile-apps/barebone-glossy/photo-1.jpg",
        "title": "Continuing Education 2015 Class Schedule",
        "body1": "October 24, 2015 from 9am - 1pm",
        "body2": "November 7, 2015 from 9am - 1pm",
        "body3": "November 18, 2015 from 5:30 - 9:30pm",
        "tags": ["continuing ed"]
     }
  ]
}

HTML 文件（离子 HTML）：

<ion-view view-title="Article">
  <ion-content>
    <img ng-src="{{vm.article.picture}}" />
    <div class="content-inner">
        <h1>{{vm.article.title}}</h1>
        <p>{{vm.article.body1}}</p>
        <p>{{vm.article.body2}}</p>
        <p>{{vm.article.body3}}</p>
    </div>
  </ion-content>
</ion-view>