Format JSON for a line break when parsed on iPhone

Question

I'm trying to format my JSON file so that when parsed it will display as paragraphs with line breaks like this:

This is one line.

This is a second line.

This is a third line.

I've tried \n \\n \p\n but to no avail.

Here is the iPhone screen where I want the text parsed:

Here is the JSON file. Particularly the "body" tag is where I want to do this:

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

new.service.js file that downloads the JSON:

(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

Ionic views are html views. So \n are ignored unless in <pre> tags, so after loading your data, iterate over your objects as:

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 />');

This will replace all occurrences of line breaks \n with
tags and display properly in your html.

The regex to replace newlines with
is copied from https://stackoverflow.com/a/784547/2303348

UPDATE: service to fetch and update results to replace newline with

(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

So I figured out how to create line breaks in my JSON. I just created new objects and then added those objects to the corresponding HTML.

JSON file:

{
  "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 file (Ionic 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>