How to read JSON file using JavaScript

Question

I have a problem that I can’t figure out how to read test.json file using JavaScript.

Javascript code:

<script type="text/javascript" src="test.json">
    (function(){
        var nytg = nytg || {};
        $.getJSON("test.json", function(data) {
            nytg.ipoData = data;
            console.log(data);
        });
    }());
</script>

At the moment with the code above, web site shows nothing. Here is my test.json file.

JSON data:

 [
   {
    "rMVMP": 46.3313,
    "fulldate": 20140108,
    "NAME": "SBE INC.",
    "rMVOP": 3000.9174,
    "Obs": 1,
    "BHRET3": -77.1
  },
  {
    "rMVMP": 68.357,
    "fulldate": 20140115,
    "NAME": "DICKEY-JOHN",
    "rMVOP": 52.5823,
    "Obs": 2,
    "BHRET3": 0
  },
  {
    "fulldate": 20140121,
    "NAME": "PATHCOM",
    "rMVOP": 677.331
  },
  {
    "rMVMP": 96.247,
    "fulldate": 20140211,
    "NAME": "MANUFACTURING DATA",
    "rMVOP": 76.9979,
    "Obs": 4,
    "BHRET3": 131.479
  },
  {
    "rMVMP": 112.848,
    "fulldate": 20140317,
    "NAME": "CRAY RESEARCH",
    "rMVOP": 89.7345,
    "Obs": 5,
    "BHRET3": 202.941
  },
  {
    "rMVMP": 241.045,
    "fulldate": 20140629,
    "NAME": "SHARED MEDICAL SYSTEMS",
    "rMVOP": 225.539,
    "Obs": 6,
    "BHRET3": 147.28
  },
  {
    "rMVMP": 198.788,
    "fulldate": 20140708,
    "NAME": "DOCUMATION",
    "rMVOP": 200.26,
    "Obs": 7,
    "BHRET3": 28.467
  },
  {
    "rMVMP": 93.507,
    "fulldate": 20140713,
    "NAME": "DATA TERMINAL",
    "rMVOP": 90.4415,
    "Obs": 8,
    "BHRET3": 567.005
  },
  {
    "rMVMP": 656.23,
    "fulldate": 20140812,
    "NAME": "AMDAHL",
    "rMVOP": 659.229,
    "Obs": 9,
    "BHRET3": 99.611
  },
  {
    "rMVMP": 92.331,
    "fulldate": 20140915,
    "NAME": "ROLM",
    "rMVOP": 92.3309,
    "Obs": 10,
    "BHRET3": 819.298
  },
  {
    "rMVMP": 61.2817,
    "fulldate": 20140201,
    "NAME": "CONTINUOS CURVE LENS",
    "rMVOP": 60.5251,
    "Obs": 11,
    "BHRET3": 293.68
  },
  {
    "rMVMP": 64.8688,
    "fulldate": 20140427,
    "NAME": "TESDATA SYSTEMS",
    "rMVOP": 60.2353,
    "Obs": 12,
    "BHRET3": -40.52
  },
  {
    "rMVMP": 200.629,
    "fulldate": 20141214,
    "NAME": "TANDEM COMPUTERS",
    "rMVOP": 159.119,
    "Obs": 13,
    "BHRET3": 753.333
  }
]

can you add the .fail() callback function in order to see if their are any errors? — Mivaweb
– Mivaweb, Commented Jun 5, 2014 at 7:27
you use 'console.log(data);' and waiting, that your site will show something, am I right? check console or add/show code for displaying data on the web site. — Alex Kulinkovich
– Alex Kulinkovich, Commented Jun 5, 2014 at 7:56

Anto Jurković · Accepted Answer · 2014-06-05 07:46:26Z

2

You are loading your json file like a source file:

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

That line should be

<script type="text/javascript">

Update: Complete example which dump data into console log:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>D3 example</title>
<style>
</style>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</head>
<body>
<script>
    (function(){
        var nytg = nytg || {};
        $.getJSON("24054047-test.json", function(data) {
            nytg.ipoData = data;
            console.log(data);
        });
    }());
</script>
</body>
</html>

console.log on wamp server (the first entry):

0: Object
BHRET3: -77.1
NAME: "SBE INC."
Obs: 1
fulldate: 20140108
rMVMP: 46.3313
rMVOP: 3000.9174

edited Jun 5, 2014 at 7:46

answered Jun 5, 2014 at 7:37

Anto Jurković

11.3k2 gold badges31 silver badges42 bronze badges

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

1 Comment

Pebbl Over a year ago

@user2461171 Anto Jurković's answer definitely does work, however, if you are using IE or an older browser and viewing your page over the file:// protocol that can cause additional permission issues.

Collectives™ on Stack Overflow

How to read JSON file using JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related