Load data from local JSON file into javascript

Question

[added:] Thank you guys for the reply. I understand that ajax has to used on a server. I wonder if there is a way to load the data from local json file into js in this example?

I have a file named employee.json. I tried load this JSON data into JavaScript. I saved both the .json and .html files on my desktop but when I click in the HTML, there is nothing shown. I tried to use alert() in the .ajax() method but it does not work. I am not sure what is wrong with my AJAX method. What do I need to do to take the id from the JSON and put it into an array in javaScript? Thank you in advance.

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <script>
          var res = [];

          $.ajax({
              url: 'employee.json',
              dataType: 'json',
              method: 'get',
              cache: false,              
              success: function(data) {
                  $(data.employee).each(function(index, value) {                
                     res.push(value.id);
                  });
                  document.getElementById("demo").innerHTML = res.toString();                     
              }
          });
    </script>
</body>
</html>

{
    "employee": [{
        "id" : 1,
        "firstName" : "Lokesh"
    },{
        "id" : 2,
        "firstName" : "bryant"
    },{
        "id" : 3,
        "firstName" : "kobe"
    }]
}

I saved both .json and .html file on my desktop You cannot run AJAX requests on the local file system due to the security restrictions on modern browsers. If you check the console you'll probably see a lot of errors and warnings about this. You need to run on a web server. — Rory McCrossan
– Rory McCrossan, Commented Nov 28, 2016 at 8:23
Oh nice to know this. What if I want to load json from local file into js. Is there a way to do it? — alex007
– alex007, Commented Nov 28, 2016 at 8:26
as @RoryMcCrossan said you can't run AJAX call on local file server.. use any web server. If you are using Chrome use extension web server for chrome, i found it pretty useful chrome.google.com/webstore/detail/web-server-for-chrome/… — Chetan
– Chetan, Commented Nov 28, 2016 at 8:26
Yes - as I mentioned you need to run your code on a web server. You can run a web server on your local machine quite easily. Google IIS or XAMP, amongst others. Note that you should use console.log() to debug, not alert(). Also, you can replace document.getElementById("demo").innerHTML = res.toString(); with $('#demo').html(res) — Rory McCrossan
– Rory McCrossan, Commented Nov 28, 2016 at 8:26
Check your console and give us the error. You're getting no alert because ajax doesn't enter in success. you could add a error: function(){alert('error')}) and you'll see the alert — GiuServ
– GiuServ, Commented Nov 28, 2016 at 8:26

Dimitar Nikovski · Accepted Answer · 2016-11-28 08:36:18Z

0

As an alternative you can load your JSON as a javascript, just wrap all your JSON data into

    var employees = { /*all your json data here*/ }

and save this as employees.js

Then you can just use a regular script tag in the html:

<script src="/yourpath/employees.js"/>

And then inside your javascript "employees" will be a global object. so you will have:

  employess.employee[1].FirstName

result in "bryant" in your case;

answered Nov 28, 2016 at 8:36

Dimitar Nikovski

97313 silver badges15 bronze badges

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

2 Comments

alex007 Over a year ago

Thank you for the response Dimitar. I like this idea however I may not use this way to solve my problem since at first I convert java object into local json file and now I have the problem load the local json data into js.

Dimitar Nikovski Over a year ago

stackoverflow.com/questions/38525494/…

Collectives™ on Stack Overflow

Load data from local JSON file into javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related