How to use a JavaScript to load and parse a static JSON file in the server
ajax, javascript, json
Solution
When JavaScript is running in a browser it needs to make an AJAX request to the server to access a JSON file. It is possible to write the AJAX request by hand but that is complex and difficult to make work in all browsers. Instead most people use a library like jQuery. You will need to include jQuery in your web page with something like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
Then in any script tag lower in the html page you should be able to do something like:
$.ajax({
url: "data/users.json",
dataType: "json",
success: function(response) {
$.each(response.Users, function(item) {
informationArray.push(item);
});
informationArray.push("success");
}
});
see http://api.jquery.com/jQuery.ajax/
Problem
I'm just starting to use javascript and json. I need to read data (getInformation function) from a json file when processing an event in a javascript function. So I need it to be synchronic. I don't know if I am missing something in the code, or if I have to create an Request and handle the callback, or if I need to import additional javascript to use json. Because I don't know how to make it work. It doesn't work because at the end the array is empty. Any help is aprreciated. The json file: ``` {"Users": [ {"Name": "Jane", "Points": 67, "age": 23}, { "Name": "Sam", "Points": 65, "age": 21} ]} ``` Option 1 - Function called by another function which is processing an event: ``` var getInformation = function() { var path = "./data/users.json"; var informationArray= []; console.log("Loading ...."); $.getJSON(path, function(data) { $.each(data, function(key, val) { informationArray.push(key + '-' + val); }); }); return informationArray; } ``` Option 2 - Function called by another function which is processing an event: ``` var getInformation = function() { var path = "./data/users.json"; var informationArray= []; $.ajax({ url: path, async: false, dataType: 'json', success: function(response) { $.each(response.items, function(item) { informationArray.push(item); }); informationArray.push("success"); } }); return informationArray; } ``` I have seen the following thread and tried what is there but doens't work for me. I would like to know where is the problem in my code or if require any special configuration. Thread: Is there a version of $getJSON that doesn't use a call back?