Read JSON file in JavaScript

Question

I am trying to read JSON file like this:

[166.1086159,153.6025535,109.9585098,149.0443019,121.9854975,136.2424609,68.07276721,75.02149785,112.0627478]

I deleted most of the numbers inside. I have around 200 of json files like that(depending on which button you press), so the question is how do I save this array to a variable? I've been banging my head about this for quite some time!

All help appreciated!

<!doctype html>
<html>
  <head>
      <title>Bar Chart</title>
      <script src="./Chart.js/Chart.js"></script>
  </head>
  <body>
      <div style="width: 80%">
          <canvas id="canvas" height="300" width="800"></canvas>
      </div>



<script>
function reqListener () {
    console.log(this.responseText);
    current = JSON.parse(this.responseText);
}

>   var oReq = new XMLHttpRequest();
>    oReq.onload = reqListener;
>    oReq.open("get", file, true);
>    oReq.send();

  var barChartData = {
      labels : ["501", "502", "503", "504", "505", "506", "507", "508", "509", "510",
              "511", "512", "513", "514", "515", "516", "517", "518", "519", "520",
              "521", "522", "523", "524", "525", "526", "527", "528", "529", "530",
              "531", "532", "533", "534", "535", "536", "537", "538", "539", "540",
              "541", "542", "543", "544", "545", "546", "547", "548", "549", "550",
              "551", "552", "553", "554", "555", "556", "557", "558", "559", "560",
              "561", "562", "563", "564", "565", "566", "567", "568", "569", "570",
              "571", "572", "573", "574", "575", "576", "577", "578", "579", "580",],
      datasets : [
          {
              fillColor : "rgba(151,187,205,0.5)",
              strokeColor : "rgba(151,187,205,0.8)",
              highlightFill : "rgba(151,187,205,0.75)",
              highlightStroke : "rgba(151,187,205,1)",
              data : current
          }
      ]

  }
  window.onload = function(){
      var ctx = document.getElementById("canvas").getContext("2d");
      window.myBar = new Chart(ctx).Bar(barChartData, {
          responsive : true
      });
  }

  </script>
  </body>
</html>

What does your JavaScript code look like? Please provide it in your question. — Jon Chan
– Jon Chan, Commented Dec 16, 2014 at 20:26
json IS javascript. var foo = [166....]; and off you go - one standard javascript array. — Marc B
– Marc B, Commented Dec 16, 2014 at 20:28
I edited and added JS code. @MarcB I know that, but I have over 200 of json and I only need one at the time, dont want to put them in the JS file aswell - too much work. — Kladnik
– Kladnik, Commented Dec 16, 2014 at 20:38

Barmar · Accepted Answer · 2014-12-17 08:38:53Z

2

If you load the file contents into a string variable, you use:

var string = '[166.1086159,153.6025535,109.9585098,149.0443019,121.9854975,136.2424609,68.07276721,75.02149785,112.0627478]';
var array = JSON.parse(string);
console.log(array);

If the data is in a file on your server, you can use AJAX to read it. See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest for examples of how to use the XMLHttpRequest interface in Javascript for this.

edited Dec 17, 2014 at 8:38

answered Dec 16, 2014 at 20:27

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

8 Comments

Kladnik Over a year ago

What should I put where is says string? pathname?

Barmar Over a year ago

string is the variable that contains the contents of the file that you read, e.g. with XMLHttpRequest (AJAX).

Kladnik Over a year ago

Thank you for that, I got the array as string, but for some reason I get an error in JSON.parse: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Barmar Over a year ago

That error means the string is not properly formatted as JSON. Without seeing how you're setting the string, I can't explain any better. You need to show that code in your question.

Kladnik Over a year ago

The funny part is that in Mozilla (firebug) I get the responseText like this: "[166.1086159,153.6025535,109.9585098,149.0443019,121.9854975,136.2424609,68.07276721,75.02149785,112.0627478]", but in IE I get Access is Denied, when trying to read. Error here: link

|

admdrew · Accepted Answer · 2014-12-16 20:30:45Z

1

Just use JSON.parse and pass in the file text as a string and then save it to a variable

var fileText = '';//load the file text

var jsonData = JSON.parse(fileText);

edited Dec 16, 2014 at 20:30

admdrew

3,9444 gold badges30 silver badges41 bronze badges

answered Dec 16, 2014 at 20:29

Shiala

4843 silver badges8 bronze badges

12 Comments

Kladnik Over a year ago

I already tried that, but for some reason it gives me an error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Shiala Over a year ago

How are you loading the file text?

Kladnik Over a year ago

I edited and added the JS code aswell, what do you mean with the loading the file text?

Shiala Over a year ago

Just saw your html, don't really get what you're trying to do

Kladnik Over a year ago

My json file is in the same folder as this code. Well I'm trying to create a bar chart, but depending which json I choose that will be the result. I just want to read the json in an array.

|

Collectives™ on Stack Overflow

Read JSON file in JavaScript

2 Answers 2

8 Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related