CODEWITHSUNDEEP
javascripthtmljson
hippoman
hippoman

Reputation: 330

parsing an external json file in javascript

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.

Upvotes: 2

Views: 9531

Answers (4)

Bathri Nathan
Bathri Nathan

Reputation: 1267

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
});

Upvotes: 1

Deepak
Deepak

Reputation: 1433

Use this 

function loadJSON(callback) {   

        var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
        xobj.open('GET', 'OnebusinessDataFormat_yelp.json', true); 
        xobj.onreadystatechange = function () {
              if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
              }
        };
        xobj.send(null);  
     }

The function above will create a new instance of a XMLHttpRequest and load asynchronously the contents of OnebusinessDataFormat_yelp.json. I have gone with asynchronous but you can change the argument to false if you want a synchronous load. Thankfully all modern browsers support the native JSON.parse method. Remember our anonymous callback? here's how you use it.

function init() {
 loadJSON(function(response) {
  // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });
}

For more details refer - https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript

Upvotes: 0

Kyaw Kyaw Soe
Kyaw Kyaw Soe

Reputation: 3370

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 😂.

So for obvious security reasons, you will not be able (as browser app) to open any file you want from the user file system. But you will be able to open files provided by the user like <input type="file" /> or create by yourself in specific way, other people already answered it, you can choose any solution that make sense to your app.

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44107

You 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.

Upvotes: 2

Related Questions