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
– StackSlave, Commented Dec 15, 2017 at 3:44

pepperjack · Accepted Answer · 2017-12-15 03:34:37Z

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

Perfect thanks! I knew it was simple but for the life of me couldn't work it out :)
@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.

Geoff · Accepted Answer · 2017-12-15 03:47:59Z

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"} ]

Collectives™ on Stack Overflow

How to write json on seperate lines

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related