CODEWITHSUNDEEP
javascriptjqueryjson
zxc34
zxc34

Reputation: 17

load json data into js

I am learning how to load json data into .js file. I have created a employee.json file. I saved my js and json file and on the desktop. What I trying to do is to put all the id in json files into an array in the js. I do not know what could be wrong. Hope someone could help me out. Thank you in advance. 

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      <title>JSON with jQuery</title>
    </head>

<body>
  <p id="demo"></p>
  <h1><h2>
  <script src = "<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',
          type: 'get',
          cache: false,
          success: function(data) {
              $(data.people).each(function(index, value) {
                 res.push(value.id);
              });
          }
      });

      document.getElementById("demo").innerHTML = res.toString();
  </script>

</body>
</html>

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

Upvotes: 1

Views: 158

Answers (3)

Suneel K
Suneel K

Reputation: 84

You can't use the local json to read. it gives cross origin request failure. so deploy both the files (html and json) into a we server and execute. or place the json data onto some web url(http://somesite/myjson) and then request that url and see.

Upvotes: 0

Kyle Lin
Kyle Lin

Reputation: 833

  • Error 1: Typing error. <script src = "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>. You mistyped the src of the script, accidentally adding another another <script> start tag.
  • Error 2: Misplaced statement. document.getElementById("demo").innerHTML = res.toString(); should be placed in the success callback function, so it will be executed only after the server responds. If it executes prematurely, res will still be [].
  • Error 3: type: 'GET' should be method: 'GET', according to the docs (though 'GET' is default so you don't need to explicitly write this).

Use this:

<p id="demo"></p>
<h1><h2>
<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.people).each(function(index, value) {
                 res.push(value.id);
              });
              document.getElementById("demo").innerHTML = res.toString();
          }
      });


  </script>

Upvotes: 4

夏期劇場
夏期劇場

Reputation: 18347

First of all, the JSON shouldn't be existed as in physical "file". It has to be generated by a backend language / web service etc. The JSON tags inside a manually created "file" have high chance of data invalidity upon parsing.

Solution

Use a Web Service to generate valid JSON output. And from Javascript end, use:

JSON.stringify( data );

Upvotes: -2

Related Questions