How to write json on seperate lines

Question

I am very new to JSON and this forum, hope someone can help.

In a HTML file I have the following javascript:

<script type="text/javascript" src="ExternalData.json"></script>

and

var mydata = JSON.parse(data);
alert(mydata.length);

var div = document.getElementById('data');

alert(mydata[0].name);
alert(mydata[1].name);
alert(mydata[0].age);
alert(mydata[1].age);

In a separate ExternalData.json file I have:

data = '[{"name" : "Bob", "age" : "2"},{"name" : "Mary", "age" : "4"}]';

Everything works fine, however when I try to add return marks to the JSON file like this:

data = '[
    {"name" : "Bob", "age" : "2"},
    {"name" : "Mary", "age" : "4"}]';

It no longer works for me.

What have I missed? Something basic but I have no idea!

This will eventually be a large amount of data that will be updated by a colleague unfamiliar with coding. Having all the information on one line is not workable.

That's not JSON if you assign it to a var. Why would you assign Strings like that to a var? Just use the Object Notation. — StackSlave, Dec 15 '17 at 03:44

score 2 · Accepted Answer · answered Dec 15 '17 at 03:34

2

Your problem is that the browser doesn't understand what to do with the newline in the string, and is likely throwing an error (check F12). For me (Chrome), it failed to compile the string and only saw the first line as the content for the string.

You need to escape the newline literal. Add a backwards slash on each newline in javascript. This will either merge the string into a single line once compiled, or, in some browsers, once compiled will retain the newlines.

var data = '[\
    {"name" : "Bob", "age" : "2"},\
    {"name" : "Mary", "age" : "4"}]';

You can read more about this here: JavaScript string with new line - but not using \n

answered Dec 15 '17 at 03:34

pepperjack

673
6
20

Perfect thanks! I knew it was simple but for the life of me couldn't work it out :) – Suds Dec 15 '17 at 03:37
@Nadine If it solved it, please mark it as so by clicking the check mark to the left of this answer. Thanks and welcome to Stack Overflow. – pepperjack Dec 15 '17 at 03:38
It made me wait 6 minutes... no idea why... but done :) – Suds Dec 15 '17 at 03:46

score 0 · Answer 2 · answered Dec 15 '17 at 03:47

pepperjack's answer will work, but it will make maintaining your json file more trouble. It would be better to create your external JSON file without data='...'; and grab it using XMLHTTP:

<script language="JavaScript">
    function test() {   
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                parseResponse(this.responseText);
            }
        };
        xmlhttp.open("GET", "demo.txt", true);
        xmlhttp.send();
    }
    function parseResponse(data) {
        var mydata = JSON.parse(data);
        alert(mydata.length);
        alert(mydata[0].name);
        alert(mydata[1].name);
        alert(mydata[0].age);
        alert(mydata[1].age);
    }
</script>

Where demo.txt simply contains:

[
    {"name" : "Bob", "age" : "2"},
    {"name" : "Mary", "age" : "4"}
]

How to write json on seperate lines

2 Answers2