I have to do something very simple, but there doesn't seem to be an easy way to do this, as far as I can tell. I just want to load JSON data from a remote source and store it in a global Javascript variable using jQuery. Here's what I have:
var my_json;
$.getJSON(my_url, function(json) {
var my_json = json;
});
The my_json variable remains undefined. I think this is clearly a scope issue. It seems to me the $.getJSON method should return JSON, but it returns an XMLHttpRequest object. If I do this:
request = $.getJSON(my_url);
my_json = request.responseText.evalJSON();
That doesn't work because until the readystate == 4, the responsetext remains null. It seems you have to use the callback function to return the responsetext, since it fires on success.
It can't be this hard! Right?
The answer is
This will do it:
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': my_url,
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
The main issue being that $.getJSON will run asynchronously, thus your Javascript will progress past the expression which invokes it even before its success callback fires, so there are no guarantees that your variable will capture any data.
Note in particular the 'async': false option in the above ajax call. The manual says:
By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
<input class="pull-right" id="currSpecID" name="currSpecID" value="">
$.get("http://localhost:8080/HIS_API/rest/MriSpecimen/getMaxSpecimenID", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
$("#currSpecID").val(data);
});
- this will get JSON file externally to your javascript variable.
- now this sample_data will contain the values of JSON file.
var sample_data = '';
$.getJSON("sample.json", function (data) {
sample_data = data;
$.each(data, function (key, value) {
console.log(sample_data);
});
});
var itens = null;_x000D_
$.getJSON("yourfile.json", function(data) {_x000D_
itens = data;_x000D_
itens.forEach(function(item) {_x000D_
console.log(item);_x000D_
});_x000D_
});_x000D_
console.log(itens);<html>_x000D_
<head>_x000D_
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
</body>_x000D_
</html>code bit should read:
var my_json;
$.getJSON(my_url, function(json) {
my_json = json;
});
Source: Stackoverflow.com