proper JSON format: newline not allowed for each item in a JSON array?

Question

I want to use JS to read from an external JSON file, which is an array of n objects, and n is big. So, preferably, I want to write the array with each object taking a line. However, I found it only worked when everything is put in one single line; any line break messed things up. I wonder why. Below, I use a simplified example to illustrate. Odd!

The data.json file that worked:

data = '[{"name": "Ashwin","age": "20"},{"name": "Abhinandan","age": "21"}]';

The data.json file that did not work:

data = '[{"name": "Ashwin","age": "20"},
         {"name": "Abhinandan","age": "21"}]';

The HTML file with JavaScript:

<script type="text/javascript" src="data.json"></script>
<script>
var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);
</script>

pretzelhammer · Accepted Answer · 2018-09-23 02:09:34Z

1

You can't use newline characters in JS string literals without escaping them using the backslash character. You can use newline characters without escaping them in JS string templates though. Both examples shown in the snippet below:

let data = '[{"name": "Ashwin","age": "20"},\
         {"name": "Abhinandan","age": "21"}]';
         
console.log(JSON.parse(data));

data = `[{"name": "Ashwin","age": "20"},
         {"name": "Abhinandan","age": "21"}]`;
         
console.log(JSON.parse(data));

answered Sep 23, 2018 at 2:09

pretzelhammer

15.4k16 gold badges56 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slebetman · Accepted Answer · 2018-09-23 03:28:36Z

1

What you have there is an invalid JSON file. Instead you have a js file. There are two ways to solve this:

Use a proper JSON file:

data.json:

[
    {"name": "Ashwin","age": "20"},
    {"name": "Abhinandan","age": "21"}
]

html:

<script>
fetch('data.json').then(function(result){
    var mydata = JSON.parse(result);
    alert(mydata[0].name);
    alert(mydata[0].age);
    alert(mydata[1].name);
    alert(mydata[1].age);
});
</script>

Or simply use javascript to pass the data

data.js:

// Notice that the code below is not JSON,
// it is a regular javascript array assigned
// to a global variable (no "var"):
data = [
    {"name": "Ashwin","age": "20"},
    {"name": "Abhinandan","age": "21"}
];

// Notice also that unlike JSON, this file
// can contain comments and other code!

html:

<script type="text/javascript" src="data.js"></script>
<script>
// Notice that since you've imported an array and not
// a JSON data you don't need to JSON.parse:
alert(data[0].name);
alert(data[0].age);
alert(data[1].name);
alert(data[1].age);
</script>

answered Sep 23, 2018 at 3:28

slebetman

115k19 gold badges147 silver badges180 bronze badges

3 Comments

Angela Over a year ago

thanks! can i ask a follow-up question: what's the requirement for json format? and what's that for js format?

slebetman Over a year ago

JSON is a text data format (like XML or CSV) invented by Douglas Crockford as a subset of javascript object literal format. The specification for JSON can be found here: json.org. Basically, it is the same as object literal except keys must always be quoted, string quotes must always be double quotes ("), and some value types or syntax are illegal (functions, variables, hexadecimal or octal number formats etc.)

slebetman Over a year ago

The reason he removed a lot of features of object literal syntax form JSON is to make JSON easy to parse in languages like C. JSON is supposed to be a data exchange format after all and being easy to parse would make it more likely to be successful

Collectives™ on Stack Overflow

proper JSON format: newline not allowed for each item in a JSON array?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related