I am trying to parse an external JSON file, and then parse it in javascript but i am getting an uncaught reference error.
I first declare the .json file in my html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script type="text/javascript" src="OnebusinessDataFormat_yelp.json"></script>
<title>title</title>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a onclick="name()">NAME</a>
<a onclick="address()">ADDRESS</a>
<a onclick="bh()">BUSINESS HOURS</a>
<a onclick="menu()">MENU</a>
<a onclick="saf()">SERVICES and FEATURES</a>
</div>
</div>
<div id="name">
<p id="rest_name"></p>
</div>
</body>
</html>
I then try to parse that file in my javascript code:
var jsonFile = JSON.parse(OnebusinessDataFormat_yelp.json);
function name(){
document.getElementById("rest_name").innerHTML = jsonFile.name;
}
but when i select name from the dropdown it does not populate the <p> element with the restaurant name.
I am trying to parse an external JSON file, and then parse it in javascript but i am getting an uncaught reference error.
I first declare the .json file in my html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script type="text/javascript" src="OnebusinessDataFormat_yelp.json"></script>
<title>title</title>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a onclick="name()">NAME</a>
<a onclick="address()">ADDRESS</a>
<a onclick="bh()">BUSINESS HOURS</a>
<a onclick="menu()">MENU</a>
<a onclick="saf()">SERVICES and FEATURES</a>
</div>
</div>
<div id="name">
<p id="rest_name"></p>
</div>
</body>
</html>
I then try to parse that file in my javascript code:
var jsonFile = JSON.parse(OnebusinessDataFormat_yelp.json);
function name(){
document.getElementById("rest_name").innerHTML = jsonFile.name;
}
but when i select name from the dropdown it does not populate the <p> element with the restaurant name.
-
The argument to
JSON.parse()is a string containing the JSON, not a filename. – Barmar Commented Mar 19, 2019 at 4:20 -
You can't use a JSON file as the
srcof a<script>. – Barmar Commented Mar 19, 2019 at 4:21 -
OnebusinessDataFormat_yelp.jsonmeans you have a variable namedOnebusinessDataFormat_yelpand it contains an object with ajsonproperty. You get the reference error because there's no variable with that name. – Barmar Commented Mar 19, 2019 at 4:22
4 Answers
Reset to default 2You need to use the Fetch API in vanilla JS if you want to get the contents of a file:
var jsonFile;
fetch("JOnebusinessDataFormat_yelp.json")
.then(res => res.json())
.then(data => jsonFile = JSON.parse(data));
Please also note that this line:
<script type="text/javascript" src="OnebusinessDataFormat_yelp.json"></script>
Will not work because you can't have a JSON file inside a <script> tag - JSON is JavaScript Object Notation (a string), and is a way of storing JavaScript objects in a simpler way than objects. You can only have a .js file inside a <script> tag.
you can use this code to get the local json file in javascript.
use this url for more reference. $.getJSON Reference
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in console
});
I will explain to you how it work, hope it will help you think.
There are 2 types of JavaScript, Server and Client.
If your JavaScript is running on Node.js (Server), all you nee is require().
const json = require(jsonFilePath);
require() will automatically parse the JSON (.json extension file) and generate JavaScript Object for you.
If your JavaScript is running in a Browser (Client), you can't open files from user file system. Just Imagine if Javascript can open any file it want from user file system. All of our data will be in Facebook data center Description