Error while reading from local JSON file in JavaScript

Question

I am new to JavaScript. My JavaScript (script.js) reads from a JSON file as shown below. The script reads without using JQuery. I followed THIS site for reference.

function readJSON() {
  var LatLongData = JSON.parse(data);
  var LatLng1 = new google.maps.LatLng(LatLongData[0]);
}

The JSON file (data.json), stored in the same location as the JavaScript is as below:

{ "data": 
[
    {"latitude" : "40.10246648", "longitude" : "-83.14877599"}
]
}

The html file is as shown below:

<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKey&sensor=true"></script>
<body onload="readJSON()">
  <div id="map-canvas"/>
</body>

I get 2 errors (both in chrome as well as Firebug) on the JSON file format. However, I verified online (http://jsonlint.com/) that the JSON file is of the right format. The errors I get are:

SyntaxError: missing ; before statement { "data":

ReferenceError: data is not defined  ---> var LatLongData = JSON.parse(data);

What am I doing wrong here?

prepend "data=" to your 'json' file and it should work

dandavis
– dandavis

2013-10-29 21:04:55 +00:00
Commented Oct 29, 2013 at 21:04 — dandavis
– dandavis, Commented Oct 29, 2013 at 21:04

Krasimir · Accepted Answer · 2013-10-29 21:01:55Z

3

You can't read the json like that. First of all you should not include it via <script> tag. You need to get the json via ajax request. I'll suggest to check the jQuery's getJSON method:

$.getJSON( "data.json", function( data ) {
   // now you can read the data
   var LatLongData = data;
   var LatLng1 = new google.maps.LatLng(LatLongData[0]);
});

What you are doing is to include the json as javascript file. That's why you got that error. Second, your readJSON uses data variable which is actually never defined.

answered Oct 29, 2013 at 21:01

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

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

2 Comments

Sarvavyapi Over a year ago

But I am reading the JSON from a file. Do I still need to use ajax?

Krasimir Over a year ago

Ajax is the way to load files via javascript. It's a http request to the file. You could do the same thing via PHP or some other server-side technology, but this should happen before to show the page.

alfonsodev · Accepted Answer · 2013-10-29 21:06:14Z

1

You included this Json

{ "data": 
[
    {"latitude" : "40.10246648", "longitude" : "-83.14877599"}
]
}

but the code is expecting a variable called data, if you pay attention to the example in the link in their "json" file they are "cheating" , it's not pure JSON as is declaring a global variable, containing a string. That string is the json. So if you go ahead following those practice you should have a "json" file.

with

var data = '[ {"latitude" : "40.10246648", "longitude" : "-83.14877599"}]'

but I suggest you to follow Krasimir's answer.

answered Oct 29, 2013 at 21:06

alfonsodev

2,7542 gold badges25 silver badges31 bronze badges

Collectives™ on Stack Overflow

Error while reading from local JSON file in JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related