简体   繁体   中英

Does JSON accept multi-line arrays?

I am trying to build a SPA ( Single Page Application ) as a simple website using only JSON, while I am learning JavaScript.

In the technique I use, page content with HTML tags are injected by JavaScript.

Since last JavaScript versions can store data between backticks

`
Multi
Line 
Data
`

I am asking if multi-line JSON objects can store data by the same technique or something similar, so I can implement a way to edit data, without importing each tag from a HTML file, as new JavaScript framework do.

`` "" '' 

For example:

var spa = {
..."spa_html_id_body_tag":"< h2 > body content < h2/ > < br > Bal bla bla .............."
}

JSON doesn't support backticks like JavaScript template literals do. But it shouldn't be a problem. You can still create the multi-line string using a template literal, and when you call JSON.stringify() it will use \\n in the JSON for the newlines.

JSON is an extremely rigid schema. It's great, but it has a couple of shortcomings, the largest of which is the inability to store multi-line strings. This can be particularly annoying for storing things like structured text and public keys in JSON for later interaction with JavaScript code in the browser or on the server in Node.

Fortunately, there is a quick and hacky solution!

Example Imagine that we have a list of servers and their associated public keys. To store that data as JSON, we could store it as an array of comma-separated string objects, which might look something like this:

{
    "servers": {
        "servername.com": {
            "publicKey": [
                "-----BEGIN PUBLIC KEY-----",
                "MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA0VmDBbzXdgubV/X8JP9B",
                "rM/CqvXBey49BoYjk0ar4OA4LZnmD0A/pn6voPPe+DQC3ZpSFfkdZc5s/ij7edve",
                "ob+reWdGOQAQnDxaGQoFyru/2tz1lNfaVOBU71QcpG4kda4XDjbS62hOqebgkQ0X",
                "71ireglZeaJABvu6EFPFBwyr2ROmM1dq4rKtinpgUf9CTMPL/8yyitka+HsVZTuI",
                "HDpFFxv6xPntfjMrIIRUPieIjRSJcF9yrTVqDIIOO9J3KplphXLXhAHRAnX3ducD",
                "sZYe5yZZEdkS9Kx4P0INkyiqs9DFGwVnIMU07IuM1E+LqLVTqm46MVxzrjaAcyVC",
                "WDTtzkERgvvaG8elbjb6iiA9aijNHM/EK0f68mjme7s0CHn9GJg4TwwvSLb8LqCs",
                "cCKT11WAanE+SuAi0WinuaeFORwAFFXh7O5sS8At4woCNVsIZpFSWWiRBoZf5UBC",
                "SfK8v9AL58foDDiCGlWKcpoQN5KBDBCTBD+RiXgoCKS9daHGpmXfAFsWmcjpVzvs",
                "l24ei4Ue1jd7kj7Dlc8qtXQGZS1BhwDaIV4SQBGYKEBgTMExcsAtI9Sd1rtMFybO",
                "wdfGmZkQ7pcLqOgEzyUOma+vwhWlvtfQXavH5NEdAS+ahsf8SDAI0TQtihLxTvO5",
                "LLrORy0wclzv7V0s+6qoRuMCAwEAAQ==",
                "-----END PUBLIC KEY-----"
            ]
        }
    }
}

You can verify that this valid JSON with JSONLint.

Then, to retrieve our text block, we just have to join them back together on the newline characters, which we can do like this:

var publicKey = our_data.servers['servername.com'].publicKey.join('\n');

And that's it! Now you can store multiline strings in JSON. It's not the prettiest thing, but it is the simplest given the constraints of JSON.

By definition, JSON data uses strings enclosed by double quotation marks. Depending on your use-case, using HTML tags may still be the most simple solution:

{
    "text": "Multi<br />Line<br />Data"
}

If you'd prefer using the \\n notation to represent a new line, you could then write the text as "Multi\\nLine\\nData" and - if necessary - use the replace method when you import it into your JavaScript:

JSON.parse(json).text.replace(/\n/g, '<br />');

But if you want greater flexibility than that, then you'll probably need to enter the world of HTML templating. For an option that's simpler than HTML, I'd recommend taking a look at Markdown . In Markdown, your example could simply be written:

Multi
Line
Data

You can reference the Markdown file in your JSON, and use that reference to import it into your JavaScript.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM