Trying to load local JSON file to show data in a html page using JQuery

Question

Hi I am trying to load local JSON file using JQuery to show data but i am getting some weird error. May i know how to solve this.

<html>
 <head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        

<script type="text/javascript">
    $(document).ready(function(e) {
    $.getJSON( "priorities.json" , function( result ){
        alert(result.start.count);
    });
});
</script></head>
</html>

I am just alerting the count of JSON data. My JSON file is in the same directory where this html file is and JSON string format is shown below.

{
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

JSON file name priorities.json and error is

Uncaught Referenceerror priorities is not defined

Check your HTML markup for unclosed tags somewhere. Is the `head` missing or you just forgot to copy and paste this part of the page? — emerson.marini, Sep 05 '13 at 13:20
I will parse but first before parsing only it is giving me error. — Venkata Krishna, Sep 05 '13 at 13:20
[Chrome will not like this](http://stackoverflow.com/questions/2541949/problems-with-jquery-getjson-using-local-files-in-chrome). — mccannf, Sep 05 '13 at 13:21
You error says that you are trying to use an undefined var/object called `priorities` that doesn't exist and/or is undefined. That code isn't responsible for the error, I think. — Joum, Sep 05 '13 at 13:22
I know that error and i am verifying it in server also> It's giving me same error — Venkata Krishna, Sep 05 '13 at 13:23
yeah i am loading from hard disk and html and json file both are in same directory — Venkata Krishna, Sep 05 '13 at 13:26
@Venkat: declare it like `var json = yourjson;` and use a script tag to load it. — Khanh TO, Sep 05 '13 at 13:31

score 47 · Answer 1 · answered Apr 02 '15 at 16:20

47

You can simply include a Javascript file in your HTML that declares your JSON object as a variable. Then you can access your JSON data from your global Javascript scope using data.employees, for example.

index.html:

<html>
<head>
</head>
<body>
  <script src="data.js"></script>
</body>
</html>

data.js:

var data = {
  "start": {
    "count": "5",
    "title": "start",
    "priorities": [{
      "txt": "Work"
    }, {
      "txt": "Time Sense"
    }, {
      "txt": "Dicipline"
    }, {
      "txt": "Confidence"
    }, {
      "txt": "CrossFunctional"
    }]
  }
}

answered Apr 02 '15 at 16:20

senornestor

4,075
2
33
33

Do you know of any way to display that from the html script? isnt it just console.log(data)? – Jouster500 Aug 07 '15 at 15:23
Ya the code in data.js is globally available from the HTML document, so using `data` or `data.start.count` within a ` – senornestor Aug 07 '15 at 19:58
This is also a JavaScript not a Json-Solution! :( – Fusca Software Jul 25 '17 at 13:50
It returns empty file, should I write absolute path for the `data.js`, which also does not work ? @senornestor – alper Oct 26 '18 at 10:43
Yeah, for offline data testing this is best! :) I was thinking of it while reading all answers above :p – krupesh Anadkat Sep 23 '19 at 06:31

Khanh TO · Answer 2 · 2015-09-18T13:52:59.030

Due to security issues (same origin policy), javascript access to local files is restricted if without user interaction.

According to https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs:

A file can read another file only if the parent directory of the originating file is an ancestor directory of the target file.

Imagine a situation when javascript from a website tries to steal your files anywhere in your system without you being aware of. You have to deploy it to a web server. Or try to load it with a script tag. Like this:

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        
<script type="text/javascript" language="javascript" src="priorities.json"></script> 

<script type="text/javascript">
   $(document).ready(function(e) {
         alert(jsonObject.start.count);
   });
</script>

Your priorities.json file:

var jsonObject = {
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

Or declare a callback function on your page and wrap it like jsonp technique:

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js">    </script> 
     <script type="text/javascript">
           $(document).ready(function(e) {

           });

           function jsonCallback(jsonObject){
               alert(jsonObject.start.count);
           }
        </script>

 <script type="text/javascript" language="javascript" src="priorities.json"></script>

Your priorities.json file:

jsonCallback({
    "start": {
        "count": "5",
        "title": "start",
        "priorities": [
            {
                "txt": "Work"
            },
            {
                "txt": "Time Sense"
            },
            {
                "txt": "Dicipline"
            },
            {
                "txt": "Confidence"
            },
            {
                "txt": "CrossFunctional"
            }
        ]
    }
    })

Using script tag is a similar technique to JSONP, but with this approach it's not so flexible. I recommend deploying it on a web server.

With user interaction, javascript is allowed access to files. That's the case of File API. Using file api, javascript can access files selected by the user from <input type="file"/> or dropped from the desktop to the browser.

In this "solution" `priorities.json` is not a JSON file anymore, but a JavaScript file. — trincot, Dec 20 '16 at 06:11
Do you have html file for this as well where I can try to run? @Khanh TO — alper, Oct 26 '18 at 10:48
This is not good, I currently am trying to fix a CSP issue, and just calling a json file a javascript file does nobody no good ) : — Derrops, Jun 21 '21 at 10:59
@Derrops: could you be more specific about your problem of trying to fix a CSP issue? This question is just about loading a local json file, maybe the author of the question needed a way to quickly do some UI development locally (with data). In QA and production environments, we should deploy to real servers. — Khanh TO, Jun 26 '21 at 03:34
All good your answer is an ok work around but it does not answer the question. If you make a json file a javascript file it is no longer content but becomes a script. This can be a security issue, imagine if that file was uploaded by the user, or retrieved from a service somewhere, that could lead to xss vulnerability. Also some restricting CSPs (Content Security Policies) could block your script from running altogether. — Derrops, Jun 29 '21 at 04:46
@Derrops: i believe when we deploy the code to PROD, we have to load the json properly. Besides, this was a technique called JSONP in the past to load json from another domain when CORS was not very supported, it also relies on trust with the other domain — Khanh TO, Jul 03 '21 at 02:15

score 27 · Accepted Answer · edited May 23 '17 at 11:55

27

As the jQuery API says: "Load JSON-encoded data from the server using a GET HTTP request."

http://api.jquery.com/jQuery.getJSON/

So you cannot load a local file with that function. But as you browse the web then you will see that loading a file from filesystem is really difficult in javascript as the following thread says:

Local file access with javascript

edited May 23 '17 at 11:55

Community

1
1

answered Sep 05 '13 at 13:23

hequ

761
6
14

Actually I managed it with my browser - http://qtweb.net/. and I think it is also feasible in Chrome (for example) if you enable an option when you run it: http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file . – Joum Sep 05 '13 at 13:28
yeah that works with chrome, but I would consider that more of a hack than a final solution.. – hequ Sep 05 '13 at 13:30

Surya Singh · Answer 4 · 2017-03-27T05:15:44.453

app.js

$("button").click( function() {
 $.getJSON( "article.json", function(obj) {
  $.each(obj, function(key, value) {
         $("ul").append("<li>"+value.name+"'s age is : "+value.age+"</li>");
  });
 });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tax Calulator</title>
    <script src="jquery-3.2.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <ul></ul>
    <button>Users</button>
<script type="text/javascript" src="app.js"></script>
  </body>
</html>

article.json

{
"a": {
"name": "Abra",
"age": 125,
"company": "Dabra"
},
"b": {
"name": "Tudak tudak",
"age": 228,
"company": "Dhidak dhidak"
}
}

server.js

var http = require('http');
var fs = require('fs');

function onRequest(request,response){
  if(request.method == 'GET' && request.url == '/') {
          response.writeHead(200,{"Content-Type":"text/html"});
          fs.createReadStream("./index.html").pipe(response);
  } else if(request.method == 'GET' && request.url == '/jquery-3.2.0.min.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./jquery-3.2.0.min.js").pipe(response);
  } else if(request.method == 'GET' && request.url == '/app.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./app.js").pipe(response);
  }
  else if(request.method == 'GET' && request.url == '/article.json') {
          response.writeHead(200,{"Content-Type":"text/json"});
          fs.createReadStream("./article.json").pipe(response);
  }
}

http.createServer(onRequest).listen(2341);
console.log("Server is running ....");

Server.js will run a simple node http server in your local to process the data.

Note don't forget toa dd jQuery library in your folder structure and change the version number accordingly in server.js and index.html

This is my running one https://github.com/surya4/jquery-json.

score 3 · Answer 5 · answered Jan 13 '15 at 15:47

The d3.js visualization examples I've been replicating on my local machine.. which import .JSON data.. all work fine on Mozilla Firefox browser; and on Chrome I get the cross-origins restrictions error. It's a weird thing how there's no issue with importing a local javascript file, but try loading a JSON and the browser gets nervous. There should at least be some setting to let the user over-ride it, the way pop-ups are blocked but I get to see an indication and a choice to unblock them.. no reason to be so Orwellian about the matter. Users shouldn't be treated as too naive to know what's best for them.

So I suggest using Firefox browser if you're working locally. And I hope people don't freak out over this and start bombing Mozilla to enforce cross-origin restrictions for local files.

score -3 · Answer 6 · answered Nov 27 '14 at 02:59

-3

I would try to save my object as .txt file and then fetch it like this:

 $.get('yourJsonFileAsString.txt', function(data) {
   console.log( $.parseJSON( data ) );
 });

answered Nov 27 '14 at 02:59

amir

11
4

1

This has the exact same problem as getJSON. – Moss Mar 02 '17 at 03:10

score -3 · Answer 7 · answered Feb 12 '20 at 02:39

I have Used Following Methods But non of them worked:

   // 2 Method Failed

        $.get(
            'http://www.corsproxy.com/' +
            'en.github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
            function (response) {
                console.log("> ", response);
                $("#viewer").html(response);
            });
// 3 Method Failed

    var jqxhr = $.getJSON( "./json/movies-coming-soon.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
  console.log( "second complete" );
});

// 4 Method Failed

$.ajax({
   type: 'POST',
   crossDomain: true,
   dataType: 'jsonp',
   url: 'https://github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
   success: function(jsondata){
    console.log(jsondata)
   }
})

// 5 Method Failed


$.ajax({
   url: 'https://github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
   headers: {  'Access-Control-Allow-Origin': 'htt://site allowed to access' },
   dataType: 'jsonp',
   /* etc */
   success: function(jsondata){

   }
})

What worked For me to simply download chrome extension called "200 OK!" or Web server for chrome and write my code like this:

// Worked After local Web Server

        $(document).ready(function () {
            $.getJSON('./json/movies-coming-soon.json', function (data) {
              var movie_name = '';
              var movie_year = '';
                $.each(data,function(i,item){
                    console.log(item.title,item.year,item.poster)
                    movie_name += item.title + "  " + item.year + "<br> <br>"

                    $('#movie_name').html(movie_name)


                })

            })

        })

Its because you can not access local file without running local web server as per CORS policy so in order to running it you must have some host server.

Trying to load local JSON file to show data in a html page using JQuery

7 Answers7

Linked