Loading local JSON file

Javascript Jquery Json Firebug Local Files

Javascript Problem Overview

I'm trying to load a local JSON file but it won't work. Here is my JavaScript code (using jQuery):

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

The test.json file:

{"a" : "b", "c" : "d"}

Nothing is displayed and Firebug tells me that data is undefined. In Firebug I can see json.responseText and it is good and valid, but it's strange when I copy the line:

 var data = eval("(" +json.responseText + ")");

in Firebug's console, it works and I can access data.

Does anyone have a solution?

Javascript Solutions

Solution 1 - Javascript

$.getJSON is asynchronous so you should do:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Solution 2 - Javascript

I had the same need (to test my angularjs app), and the only way I found is to use require.js:

var json = require('./data.json'); //(with path)

note: the file is loaded once, further calls will use the cache.

More on reading files with nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js: http://requirejs.org/

Solution 3 - Javascript

In a more modern way, you can now use the Fetch API:

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

All modern browsers support Fetch API. (Internet Explorer doesn't, but Edge does!)

or with async/await

async function printJSON() {
    const response = await fetch("test.json");
    const json = await response.json();
    console.log(json);
}

source:

Solution 4 - Javascript

If you want to let the user select the local json file (anywhere on the filesystem), then the following solution works.

It uses uses FileReader and JSON.parser (and no jquery).

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>


<script type="text/javascript">

  function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>

</body>
</html>

Here is a good intro on FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Solution 5 - Javascript

If you're looking for something quick and dirty just load the data in the head of your HTML document.

data.js

var DATA = {"a" : "b", "c" : "d"};

index.html

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

main.js

(function(){
   console.log(DATA); // {"a" : "b", "c" : "d"}
})();

I should mention that your heap size (in Chrome) is about 4GBs, so if your data is larger than that you should find another method. If you want to check another browser try this:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

Solution 6 - Javascript

how to using `XMLHttpRequest` to load the local `json` file

ES5 version

// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!

function loadJSON(callback) {
  var xObj = new XMLHttpRequest();
  xObj.overrideMimeType("application/json");
  xObj.open('GET', './data.json', true);
  // 1. replace './data.json' with the local path of your file
  xObj.onreadystatechange = function() {
      if (xObj.readyState === 4 && xObj.status === 200) {
          // 2. call your callback function
          callback(xObj.responseText);
      }
  };
  xObj.send(null);
}

function init() {
  loadJSON(function(response) {
    // 3. parse JSON string into JSON Object
    console.log('response =', response);
    var json = JSON.parse(response);
    console.log('your local JSON =', JSON.stringify(json, null, 4));
    // 4. render to your page
    const app = document.querySelector('#app');
    app.innerHTML = '<pre>' + JSON.stringify(json, null, 4) + '</pre>';
  });
}

init();

<section id="app">
   loading...
</section>

ES6 version

// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!

const loadJSON = (callback) => {
  const xObj = new XMLHttpRequest();
  xObj.overrideMimeType("application/json");
  // 1. replace './data.json' with the local path of your file
  xObj.open('GET', './data.json', true);
  xObj.onreadystatechange = () => {
      if (xObj.readyState === 4 && xObj.status === 200) {
          // 2. call your callback function
          callback(xObj.responseText);
      }
  };
  xObj.send(null);
}

const init = () => {
  loadJSON((response) => {
      // 3. parse JSON string into JSON Object
      console.log('response =', response);
      const json = JSON.parse(response);
      console.log('your local JSON =', JSON.stringify(json, null, 4));
      // 4. render to your page
      const app = document.querySelector('#app');
      app.innerHTML = `<pre>${JSON.stringify(json, null, 4)}</pre>`;
  });
}

init();

<section id="app">
   loading...
</section>

online demo

https://cdn.xgqfrms.xyz/ajax/XMLHttpRequest/index.html

Solution 7 - Javascript

I can't believe how many times this question has been answered without understanding and/or addressing the problem with the Original Poster's actual code. That said, I'm a beginner myself (only 2 months of coding). My code does work perfectly, but feel free to suggest any changes to it. Here's the solution:

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  
    
//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 
    
//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

Here's a shorter way of writing the same code I provided above:

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

You can also use $.ajax instead of $.getJSON to write the code exactly the same way:

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

Finally, the last way to do this is to wrap $.ajax in a function. I can't take credit for this one, but I did modify it a bit. I tested it and it works and produces the same results as my code above. I found this solution here --> https://stackoverflow.com/questions/2177548/load-json-into-variable/2177585#2177585

var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

The test.json file you see in my code above is hosted on my server and contains the same json data object that he (the original poster) had posted.

{
    "a" : "b",
    "c" : "d"
}

Solution 8 - Javascript

I'm surprised import from es6 has not been mentioned (use with small files)

Ex: import test from './test.json'

webpack 2< uses the json-loader as default for .json files.

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

For TypeScript:

import test from 'json-loader!./test.json';

> TS2307 (TS) Cannot find module 'json-loader!./suburbs.json'

To get it working I had to declare the module first. I hope this will save a few hours for someone.

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import test from 'json-loader!./test.json';

If I tried to omit loader from json-loader I got the following error from webpack:

> BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix > when using loaders. > You need to specify 'json-loader' instead of 'json', > see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Solution 9 - Javascript

Add to your JSON file from the beginning

var object1 = [

and at the end

Save it

Then load it with pure js as

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

And now you can use it as object1 - its already loaded!

Works perfectly in Chrome and without any additional libraries

Solution 10 - Javascript

Recently D3js is able to handle local json file.

This is the issue https://github.com/mbostock/d3/issues/673

This is the patch inorder for D3 to work with local json files. https://github.com/mbostock/d3/pull/632

Solution 11 - Javascript

Found this thread when trying (unsuccessfully) to load a local json file. This solution worked for me...

function load_json(src) {
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try {
    element.parentNode.removeChild(element);
  } catch (e) {
    //
  }

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)
}

... and is used like this...

load_json("test2.html.js")

...and this is the <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>

Solution 12 - Javascript

What I did was editing the JSON file little bit.

myfile.json => myfile.js

In the JSON file, (make it a JS variable)

{name: "Whatever"} => var x = {name: "Whatever"}

At the end,

export default x;

Then,

import JsonObj from './myfile.js';

Solution 13 - Javascript

In TypeScript you can use import to load local JSON files. For example loading a font.json:

import * as fontJson from '../../public/fonts/font_name.json';

This requires a tsconfig flag --resolveJsonModule:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

For more information see the release notes of typescript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

Solution 14 - Javascript

In angular (or any other framework), you can load using http get I use it something like this:

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

Hope this helps.

Solution 15 - Javascript

An approach I like to use is to pad/wrap the json with an object literal, and then save the file with a .jsonp file extension. This method also leaves your original json file (test.json) unaltered, as you will be working with the new jsonp file (test.jsonp) instead. The name on the wrapper can be anything, but it does need to be the same name as the callback function you use to process the jsonp. I'll use your test.json posted as an example to show the jsonp wrapper addition for the 'test.jsonp' file.

json_callback({"a" : "b", "c" : "d"});

Next, create a reusable variable with global scope in your script to hold the returned JSON. This will make the returned JSON data available to all other functions in your script instead of just the callback function.

var myJSON;

Next comes a simple function to retrieve your json by script injection. Note that we can not use jQuery here to append the script to the document head, as IE does not support the jQuery .append method. The jQuery method commented out in the code below will work on other browsers that do support the .append method. It is included as a reference to show the difference.

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

Next is a short and simple callback function (with the same name as the jsonp wrapper) to get the json results data into the global variable.

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

The json data can now be accessed by any functions of the script using dot notation. As an example:

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

This method may be a bit different from what you are used to seeing, but has many advantages. First, the same jsonp file can be loaded locally or from a server using the same functions. As a bonus, jsonp is already in a cross-domain friendly format and can also be easily used with REST type API's.

Granted, there are no error handling functions, but why would you need one? If you are unable to get the json data using this method, then you can pretty much bet you have some problems within the json itself, and I would check it on a good JSON validator.

Solution 16 - Javascript

You can put your json in a javascript file. This can be loaded locally (even in Chrome) using jQuery's getScript() function.

map-01.js file:

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

output:

world width: 500

Notice that the json variable is declared and assigned in the js file.

Solution 17 - Javascript

If you are using a local array for JSON - as you showed in your example in the question (test.json) then you can is the parseJSON() method of JQuery ->

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON() is used for getting JSON from a remote site - it will not work locally (unless you are using a local HTTP Server)

Solution 18 - Javascript

$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });
                    

             }
  });

Solution 19 - Javascript

I haven't found any solution using Google's Closure library. So just to complete the list for future vistors, here's how you load a JSON from local file with Closure library:

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});

Solution 20 - Javascript

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);

I did this for my cordova app, like I created a new javascript file for the JSON and pasted the JSON data into String.raw then parse it with JSON.parse

Solution 21 - Javascript

function readTextFile(srcfile) {
		try { //this is for IE
			var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) {
				var fileReader = fso.OpenTextFile(srcfile, 1);
			    var line = fileReader.ReadLine();
				var jsonOutput = JSON.parse(line); 
			}
			
		} catch (e) {
			 
		}
}

readTextFile("C:\\Users\\someuser\\json.txt");

What I did was, first of all, from network tab, record the network traffic for the service, and from response body, copy and save the json object in a local file. Then call the function with the local file name, you should be able to see the json object in jsonOutout above.

Solution 22 - Javascript

What worked for me is the following:

Input:

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

Javascript Code:

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

<script>
function output(inp) {
	document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
	path = window.location.search.substr(1)
	var rawFile = new XMLHttpRequest();
	var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
	//alert('Starting to read text')
	rawFile.onreadystatechange = function ()
	{
		//alert("I am here");
		if(rawFile.readyState === 4)
		{
			if(rawFile.status === 200 || rawFile.status == 0)
			{
				var allText = rawFile.responseText;
				//alert(allText)
				var json_format = JSON.stringify(JSON.parse(allText), null, 8)
				//output(json_format)
				output(syntaxHighlight(json_format));
			}
		}
	}
	rawFile.send(null);
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

gethtmlcontents();
</script>
</head>
<body>
</body>
</html>

Solution 23 - Javascript

simplest way: save json file as *.js and include to html template as script.

js file like this:

let fileJsonData = {
  someField: someValue,
  ...
}

include like this:

...
<script src="./js/jsonData.js"></script>
...

After include you can call to fileJsonData in global scope.

Solution 24 - Javascript

If you have Python installed on your local machine (or you don't mind install one), here is a browser-independent workaround for local JSON file access problem that I use:

Transform the JSON file into a JavaScript by creating a function that returns the data as JavaScript object. Then you can load it with <script> tag and call the function to get the data you want.

Here comes the Python code

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'(){return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';}')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')

Content Type	Original Author	Original Content on Stackoverflow
Question	Patrick Browne	View Question on Stackoverflow
Solution 1 - Javascript	seppo0010	View Answer on Stackoverflow
Solution 2 - Javascript	Ehvince	View Answer on Stackoverflow
Solution 3 - Javascript	aloisdg	View Answer on Stackoverflow
Solution 4 - Javascript	Trausti Kristjansson	View Answer on Stackoverflow
Solution 5 - Javascript	jwerre	View Answer on Stackoverflow
Solution 6 - Javascript	xgqfrms	View Answer on Stackoverflow
Solution 7 - Javascript	SpoonHonda	View Answer on Stackoverflow
Solution 8 - Javascript	Ogglas	View Answer on Stackoverflow
Solution 9 - Javascript	Mark	View Answer on Stackoverflow
Solution 10 - Javascript	ns-1m	View Answer on Stackoverflow
Solution 11 - Javascript	TechSpud	View Answer on Stackoverflow
Solution 12 - Javascript	Supun Kavinda	View Answer on Stackoverflow
Solution 13 - Javascript	teh.fonsi	View Answer on Stackoverflow
Solution 14 - Javascript	rajkiran	View Answer on Stackoverflow
Solution 15 - Javascript	Epiphany	View Answer on Stackoverflow
Solution 16 - Javascript	Victor Stoddard	View Answer on Stackoverflow
Solution 17 - Javascript	Manse	View Answer on Stackoverflow
Solution 18 - Javascript	Karhan Vijay	View Answer on Stackoverflow
Solution 19 - Javascript	Kenny806	View Answer on Stackoverflow
Solution 20 - Javascript	Jeeva	View Answer on Stackoverflow
Solution 21 - Javascript	Feng Zhang	View Answer on Stackoverflow
Solution 22 - Javascript	Bishwas Mishra	View Answer on Stackoverflow
Solution 23 - Javascript	hwak	View Answer on Stackoverflow
Solution 24 - Javascript	sytrus	View Answer on Stackoverflow

Loading local JSON file

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

how to using `XMLHttpRequest` to load the local `json` file

ES5 version

ES6 version

online demo

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Solution 14 - Javascript

Solution 15 - Javascript

Solution 16 - Javascript

Solution 17 - Javascript

Solution 18 - Javascript

Solution 19 - Javascript

Solution 20 - Javascript

Solution 21 - Javascript

Solution 22 - Javascript

Solution 23 - Javascript

Solution 24 - Javascript

Get connection string from App.config

Unrecognized attribute 'targetFramework'. Note that attribute names are case-sensitive

Attributions

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

how to using XMLHttpRequest to load the local json file

ES5 version

ES6 version

online demo

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Solution 14 - Javascript

Solution 15 - Javascript

Solution 16 - Javascript

Solution 17 - Javascript

Solution 18 - Javascript

Solution 19 - Javascript

Solution 20 - Javascript

Solution 21 - Javascript

Solution 22 - Javascript

Solution 23 - Javascript

Solution 24 - Javascript

Get connection string from App.config

Unrecognized attribute 'targetFramework'. Note that attribute names are case-sensitive

Attributions

how to using `XMLHttpRequest` to load the local `json` file