issue with line breaks in json file

Question

I export data out of a system and get this block of content, how do i remove the line breaks so it is all one line.

I have tried various things such as "jsonData.replace(/[\r\n]+/g, '\n\n');", but nothing seems to work.

{"pageUrl":"/about","name":"About Us","content":"\n \n \n \n About \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n \n"}

this is the code in whole, the above is just one item in the json file

function list_pages(){ var access_token = BCAPI.Helper.Site.getAccessToken(); var request = $.ajax({ url: "/webresources/api/v3/sites/current/pages?fields=pageUrl,name,content", type: "GET", connection: "keep-alive", contentType: "application/json", headers: { "Authorization": $.cookie('access_token') } }); request.done(function (msg) { var myJSONString = JSON.stringify(msg.items); **var myEscapedJSONString = myJSONString.replace(/[\r\n]/g, '');** $( "#results" ).append( myEscapedJSONString ); }) request.fail(function (jqXHR) { console.log("Request failed."); console.log("Error code: " + jqXHR.status); console.log("Error text: " + jqXHR.statusText); console.log("Response text: " + jqXHR.responseText); }) }

You mean the \n characters in the text? They look like part of the intended content of the fields as they were input, and form part of how it's intended to be displayed in a text document. Why would you want to remove them? — ADyson
– ADyson, Commented Jun 22, 2018 at 10:04
@ADyson - No, there are both \n and actual literal newlines in string literals in the JSON in the question. (The latter being invalid.) — T.J. Crowder
– T.J. Crowder, Commented Jun 22, 2018 at 10:07
if i add this code to a json beautifier it errors, if i remove the line breaks manually it is ok, i cannot do anything about the imported data as it is the contents of a web page, but i need it beautified to be able to then export it into another system — djcamo
– djcamo, Commented Jun 22, 2018 at 10:07

T.J. Crowder · Accepted Answer · 2018-06-22 11:00:43Z

Updated Answer:

Your edit to the question completely changes it. You're doing a replace on the result of JSON.stringify, which will never produce the JSON you have in the question (with actual carriage return and/or newline characters in the string).

In a comment, you've said your goal is to see the formatted JSON data. To do that:

Tell JSON.stringify to format it by adding null, n to the call, where n is how much you want things indented. So for instance: JSON.stringify(msg.items, null, 4).
Replace & with & and < with < (in that order).
Output to an element with one of the pre settings for its white-space CSS setting (a pre element, for instance, but you can do it with CSS as well)

So:

var htmlToDisplay = jsonData .replace(/&/g, "&amp;") .replace(/</g, "&lt;");

...and then put it in an element with white-space: pre.

Example:

var msg = { items: [ { pageUrl: "/about", name: "About Us", content: "\n \n \n \n About\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..." } ] }; var jsonData = JSON.stringify(msg.items, null, 4); var htmlToDisplay = jsonData .replace(/&/g, "&amp;") .replace(/</g, "&lt;"); $("#results").append(htmlToDisplay);

#results { white-space: pre; font-family: monospace; }

<div id="results"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

There are other settings for white-space you might try, like pre-wrap:

var msg = { items: [ { pageUrl: "/about", name: "About Us", content: "\n \n \n \n About\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..." } ] }; var jsonData = JSON.stringify(msg.items, null, 4); var htmlToDisplay = jsonData .replace(/&/g, "&amp;") .replace(/</g, "&lt;"); $("#results").append(htmlToDisplay);

#results { white-space: pre-wrap; font-family: monospace; }

<div id="results"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Original Answer:

You don't want to replace those invalid line breaks with line breaks; you want to replace them with nothing:

jsonData = jsonData.replace(/[\r\n]/g, '');

let jsonData = document.getElementById("the-json").textContent; jsonData = jsonData.replace(/[\r\n]/g, ''); console.log(JSON.parse(jsonData));

<script id="the-json" type="text/json">{"pageUrl":"/about","name":"About Us","content":"\n \n \n \n About \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n \n"}</script>

replacing with nothing doe snot work in the context of the code, added now in original post
@djcamo - JSON.stringify will never produce the JSON you've quoted. It will never produce a string containing carriage return or newline characters inside string literals (just the equivalent escape sequences). What are you actually trying to do with your replace?
apologies for the lack of clarity, i'm just a hack coder who learns by example, for now all i am after is correctly formatted json data, hence the reason i am appending it to a HTML element so i can see what it looks ilke, so yes i am trying to remove the equivalent escape sequences
@djcamo - Ah! If you want to see the correctly-formatted JSON data, that's different from my edit above. Just a sec... :-)

Collectives™ on Stack Overflow

issue with line breaks in json file

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related