Multiline JSON string to multiline Javascript string

Question

im sure this is a simple thing to do yet im still having some troubles, so im making an HTTP request to a music API, i would like to get the lyrics of a searched song, and so i did, and its working just fine, the problem is that in the console, the JSON string is in order, you know like normal lyrics.

But when i take that perfectly ordered string and put it into a Javascript variable and print it on screen, the lyrics appears in single lines like so:

This is the verse 1 This is the verse 2 This is the verse 3 This is the verse 4 This is the verse 5 and so on.

So this is my code.

axios.get(urlLyric, { 'headers': headers }) .then(function (response) { let lyrics = response.data.lyrics_body; console.log(lyrics); $(".lyrics").html(`<p>${lyrics}</p>`) }) .catch(function (err) { console.log(err); });

Looks like some problem with the line breaks, can you post the api url or the response? — Vinay
– Vinay, Commented Mar 15, 2019 at 3:13

scott6 · Accepted Answer · 2019-03-15 04:24:06Z

if lyrics is an array, then you can do this

EDIT : add an alternative, if lyrics is just text with new line

EDIT #2 : escape HTML entities from lyrics body

 axios.get(urlLyric, { 'headers': headers }) .then(function (response) { let lyrics = response.data.lyrics_body; console.log(lyrics); // loop lyrics (if lyrics is an array) /* for(var x=0; x<lyrics.length; x++) { $(".lyrics").append('<p>'+lyrics[x]+'</p>'); } */ // if lyrics is just text with new line, escape HTML entities & replace newline character with br. $(".lyrics").html('<p>'+lyrics.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/gi,'<br>')+'</p>'); }) .catch(function (err) { console.log(err); });

for...in should not be used to iterate over arrays where the order is important. for...of is more appropriate in this case.
@scott6 Im checking over the request answer and "lyrics_body" is not an array, i have tried your code but it prints out letter by letter, it takes the whole string and turns it into an array.
@BenjaminGil i guess your lyrics_body is just text with new line. is this correct? see my updated answer then :)
@scott6 lt appears to be a normal string, i wish i could send you a photo.
This answer is open to security vulnerabilities around the way it uses text in the context of HTML. Never concatenate text directly into HTML without escaping it first.

Brad · Accepted Answer · 2019-03-15 04:01:01Z

The problem has absolutely nothing to do with JSON, nor the fact that you got your data from an API. The problem is that you're trying to use plain text in the context of HTML.

If I had the following HTML:

<p> Line 1 Line 2 </p>

You would see text on the page as:

Line 1 Line 2

There are a few ways to solve this problem. One of which is to change the way whitespace is handled with CSS.

white-space: pre-line

If you use pre-line, it will format the text into multiple lines like you're looking for.

An alternative way to solve this is to convert your text into actual structured markup. Is one line of lyrics a paragraph though? I don't think so, but this is undoubtedly debatable.

No matter which route you take, never simply concatenate text into the context of HTML. It must be escaped first. Take your code here for example:

 $(".lyrics").html(`<p>${lyrics}</p>`)

What if the song lyrics contained something like <script src="something-evil.js"></script>? You obviously wouldn't want the ability for an external API to hijack your entire site. You have to escape that text.

The easiest way to do this in jQuery is to call .text() instead. Something like this:

$('.lyrics').append( $('<p>').text(lyrics) );

Thanks for the explanation, i did not know that my code could be hijacked!. I will try that solution once i get home, Thanks again.

Collectives™ on Stack Overflow

Multiline JSON string to multiline Javascript string

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related