Menu
I want to retrieve json outside the XMLHttpRequest() but it seems that the scope is wrong.
What am I doing wrong?
>@Sempervivum#1631268 you have to place all your processing that's based on the response inside the callback function for onload
``<i>
</i>var url = "https://jsonplaceholder.typicode.com/photos";
var xhr = new XMLHttpRequest();
let data = []
data = getdata()
alert("no data returned: " + data)
function getdata() {
xhr.open("GET", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = function() {
if (xhr.readyState === 4) {
data = this.responseText;
alert data;
// data is available here. Place all statements
// that need or use data here.
}
};
xhr.send();
// data is not available here
// alert(data)
// return (data)
}<i>
</i>``>@Sempervivum#1631272
> if (xhr.readyState === 4) {
> data = this.responseText;
> alert data;
> // data is available here. Place all statements
> // that need or use data here.
> }
``<i>
</i> if (xhr.readyState === 4) {
alert(this.responseText)
return (this.responseText)
}<i>
</i>````<i>
</i> function getdata() {
xhr.open("GET", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = function () {
if (xhr.readyState === 4) {
data = this.responseText;
alert(data);
// data is available here. Place all statements
// that need or use data here.
// return statement here would be affect
// the anonymous function for unload only
}
};
xhr.send();
// It would be necessary to place the return statement
// for the function getdata here
// but unfortunately data is not yet available here
}<i>
</i> ``>@Sempervivum#1631274
> // data is available here. Place all statements
> // that need or use data here.
``<i>
</i> function processData() {
if (xhr.readyState === 4) {
data = xhr.responseText;
alert(data);
// further processing of data here
}
function getdata() {
xhr.open("GET", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onload =processData;
xhr.send();
}<i>
</i> `</CODE>
Or hand over that function as a callback:
<CODE>`<i>
</i> function processData(data) {
alert(data);
// further processing of data here
}
function getdata(url, callback) {
xhr.open("GET", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = function () {
if (xhr.readyState === 4) {
data = xhr.responseText;
callback(data);
};
xhr.send();
}
getdata('your-url', processData);<i>
</i>``>@Sempervivum#1631280 you can place the processing based on the data of the response, in a function and call this on load:
> Or hand over that function as a callback:
``<i>
</i> function getdata() {
xhr.open("GET", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = processData;
xhr.send();
}<i>
</i>````<i>
</i> var url = "http://94.237.92.101:6061/users";
var xhr = new XMLHttpRequest();
function processData(data) {
alert(data);
// further processing of data here
}
function getdata(url, callback) {
xhr.open("GET", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = function () {
if (xhr.readyState === 4) {
data = xhr.responseText;
alert(data)
callback(data);
}
}
xhr.send()
}
getdata(url, processData);<i>
</i>``>@Sempervivum#1631291 Regarding the first Fiddle:
``<i>
</i> <button onclick="getdata()">
getdata
</button>
<script>
var url = "http://94.237.92.101:6061/users";
var xhr = new XMLHttpRequest();
function processData() {
console.log("readystate: " + xhr.readyState);
if (xhr.readyState === 4) {
data = xhr.responseText;
console.log(data);
// further processing of data here
}
}
function getdata() {
xhr.open("GET", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = processData;
xhr.send();
}
</script><i>
</i>``>@Sempervivum#1631296 The code from the first fiddle works fine for me:
>Mixed Content: The page at 'https://www.webdeveloper.com/ ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://94.237.92.101:6061/users '. This request has been blocked; the content must be served over HTTPS.
>@Sempervivum#1631301 The URL of the JSON is not loaded via https
{}</C>.
When I change the URL, e. g., like this:<br/>
<C>var url = "https://jsonplaceholder.typicode.com/users/1";`>@Sempervivum#1631305 When I call that url directly in my browser, the response is exactly the same: {}.
https://jsonplaceholder.typicode.com/users>My intention was to fill a table with data. That is why I wanted to "separate" the data from the axaj:
``<i>
</i>$(document).ready(function() {
$('#example').DataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );<i>
</i>``>@Sempervivum#1631320 In this situation datatables can be your friend. A few lines of javascript and done:
0.1.9 — BETA 4.25