多行JSON字符串到多行Javascript字符串

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);
    });

Answer 1

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);
    });

Answer 2

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