Retrieving JSON information using JavaScript

Question

Retrieving JSON information using JavaScript

I am encountering an issue with the "Ion.RangeSlider" library. I am attempting to dynamically load values via JSON, but I am unable to get the slider to accept the data from the "from" field. It is important that the value is not hardcoded since the user has the ability to modify it.

$(function(){
  'use strict'
  $('#rt').ionRangeSlider({
    min: 100,
    max: 100000,
    step: 10,
    from: loaddata(), -> The data from the function is not being accepted despite console logging.
    postfix: "ms",
    prefix: "Response Time: "
  });
});

function loaddata(){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myObj = JSON.parse(this.responseText);
      //document.getElementById("rt").value = myObj.response_time; -> Attempting to change slider value also fails
      console.log(myObj.response_time); -> Successfully logs 2000 in the console
      return myObj.response_time;
    }
  };
  xmlhttp.open("GET", "api/settings.json", true);
  xmlhttp.send();
}

The contents of my json file:

{"response_time":7120,"led":0,"device_ip":"192.168.1.1"}

javascript json rangeslider

Answer 1

Answer №1

loaddata() function does not have a return value because AJAX requests are asynchronous. The data from the server is received in the onreadystatechange callback function after the server processes the request and sends a response. It is not possible for the data to be returned directly from the `loaddata()` function as it has already completed execution by the time the callback is triggered.

Trying to return data from the `onreadystatechange` callback will not work as the callback is executed within the `XmlHttpRequest` object, and the returned value remains within that object and cannot be accessed by your code.

To handle this situation, you need to fetch the data first and then use the retrieved data in the `onreadystagechange` callback to initialize the rangeslider. For example:

$(function(){
  'use strict'
  loaddata();
});

function loaddata(){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myObj = JSON.parse(this.responseText);
      console.log(myObj.response_time); -> Prints 2000 to the console
      loadRangeSlider(myObj.response_time);
    }
  };
  xmlhttp.open("GET", "api/settings.json", true);
  xmlhttp.send();
}

function loadRangeSlider(from)
{
  $('#rt').ionRangeSlider({
    min: 100,
    max: 100000,
    step: 10,
    from: from,
    postfix: "ms",
    prefix: "Response Time: "
  });
}

For more information, refer to How do I return the response from an asynchronous call?.

Answer 2

loaddata() function does not have a return value because AJAX requests are asynchronous. The data from the server is received in the onreadystatechange callback function after the server processes the request and sends a response. It is not possible for the data to be returned directly from the `loaddata()` function as it has already completed execution by the time the callback is triggered.

Trying to return data from the `onreadystatechange` callback will not work as the callback is executed within the `XmlHttpRequest` object, and the returned value remains within that object and cannot be accessed by your code.

To handle this situation, you need to fetch the data first and then use the retrieved data in the `onreadystagechange` callback to initialize the rangeslider. For example:

$(function(){
  'use strict'
  loaddata();
});

function loaddata(){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myObj = JSON.parse(this.responseText);
      console.log(myObj.response_time); -> Prints 2000 to the console
      loadRangeSlider(myObj.response_time);
    }
  };
  xmlhttp.open("GET", "api/settings.json", true);
  xmlhttp.send();
}

function loadRangeSlider(from)
{
  $('#rt').ionRangeSlider({
    min: 100,
    max: 100000,
    step: 10,
    from: from,
    postfix: "ms",
    prefix: "Response Time: "
  });
}

For more information, refer to How do I return the response from an asynchronous call?.

Retrieving JSON information using JavaScript

Answer №1

Similar questions

Requesting CORs on Web API version 2.0

Executing an Ajax request to a document containing <script> elements

Transforming JSON data into a visually appealing pie chart using highcharts

Modifying data in JSON object using Python

Concealing HTML content with a modal overlay

Using EJS to Render a Function Expression?

Could you clarify the significance of the brackets in this TypeScript Lambda Expression?

Creating a JSON object from text using JavaScript is a straightforward process

generate a customized synopsis for users without storing any data in the database

"Threads snap as soon as they begin to be put to use

How can I streamline a kendo UI MVC project by eliminating unnecessary components?

Is it true that document.execCommand only works with buttons and not links?

Leveraging Webpack and Jest for seamless module importing in a development project

The counterpart of the RxJS setTimeout operator

Issue: Angular is indicating that the 'feedbackFormDirective' member is implicitly assigned with type 'any'

A comprehensive guide on harnessing the power of server-sent events in express.js

The cursor seems to be playing a game of hopscotch every time I

Make sure to incorporate certain node_modules folders within Babel 7

Error message in Angular about undefined JavaScript function

Merge nested arrays while eliminating any redundant elements