Format JSON for a line break when parsed on iPhone - ios

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>