Utilizing AJAX to define the attributes of an object

Question

Utilizing AJAX to define the attributes of an object

As a beginner in OOP, I am trying to create an object using an ajax request. My goal is to retrieve 'responseArray' in JSON format and then manipulate it.


function address(adres) {

this.address_string = adres;
var self = this;
$.ajax({
    type: 'POST',
    url: "http://nominatim.openstreetmap.org/search?q="+adres+"&format=json&polygon=0&addressdetails=0",
    success: function(data) {
        self.responseArray = eval('(' + data + ')');
    }
});

//Method returning point coordinates in EPSG:4326 system
this.getLonLat = function() {
    var lonlat = new OpenLayers.LonLat(this.responseArray.lon, this.responseArray.lat);
    return lonlat;
}
}

The issue arises when writing the following in the application code:


var adr = new address('Zimna 3, Warszawa');
adr.getLonLat();

This does not return anything as there is no time to receive the response from the server. How can this be resolved properly for optimal performance? I have come across the when().then() method in jQuery, which seems promising. I am eager to learn about best practices.

javascript ajax oop jquery

Answer 1

Answer №1

Understanding AJAX involves grasping the asynchronous aspect of it. Indeed, when you trigger adr.getLonLat(), the response has not arrived yet. A recommended approach would be to pass a reference to a callback function in the adres constructor:

function adres(adres, callbackFun) {
  //...
  success: function(data) {
    var responseArray = eval('(' + data + ')')
    var lonlat = new OpenLayers.LonLat(responseArray[i].lon, responseArray[i].lat);
    callbackFun(lonlat)
}

You can then utilize it like this:

adres('Zimna 3, Warszawa', function(lonlat) {
  //...
})

A few important points to consider:

The revised adres essentially functions as a regular function; an object is unnecessary.
Avoid using eval for JSON parsing; instead, rely on the JSON object.
Ensure that you can make a POST request to
```
http://nominatim.openstreetmap.org
```
without encountering same-origin policy issues.
Where is the i variable sourced from in responseArray[i]?

Answer 2

Understanding AJAX involves grasping the asynchronous aspect of it. Indeed, when you trigger adr.getLonLat(), the response has not arrived yet. A recommended approach would be to pass a reference to a callback function in the adres constructor:

function adres(adres, callbackFun) {
  //...
  success: function(data) {
    var responseArray = eval('(' + data + ')')
    var lonlat = new OpenLayers.LonLat(responseArray[i].lon, responseArray[i].lat);
    callbackFun(lonlat)
}

You can then utilize it like this:

adres('Zimna 3, Warszawa', function(lonlat) {
  //...
})

A few important points to consider:

The revised adres essentially functions as a regular function; an object is unnecessary.
Avoid using eval for JSON parsing; instead, rely on the JSON object.
Ensure that you can make a POST request to
```
http://nominatim.openstreetmap.org
```
without encountering same-origin policy issues.
Where is the i variable sourced from in responseArray[i]?

Utilizing AJAX to define the attributes of an object

Answer №1

Similar questions

Attempting to utilize the async/await method to retrieve a service, but unfortunately, the returned values from the second service are not populating my variables as intended

Differences between applying addClass(undefined) and addClass(null)

hiding elements yet passing down

Issue with React: Children's state is altering the state of the parent component

Google App Engine does not properly interpret PHP code when making AJAX requests

Interactive Thumbnail Previews

Incorrect format for a date in AngularJS

Steps for dynamically loading the correct pane without having to refresh the header, footer, or left navigation

Is there a way to customize jqwidgets jQuery grid cell classes/styles based on row ID and column name?

What is the best way to include a new class into the current class in this particular scenario?

Comparing prevProps and this.props in React Native Redux: What is the most effective method?

Updating the progress state of MUI linear determinate diligently

Understanding JavaScript's JSON Path Variables

Comparing the differences between while loops and setTimeout function in JavaScript

The $_POST variable is not filled with the information displayed in the payload

Tips for optimizing Firestore database requests on the web to minimize the number of API calls

Choosing the perfect interface between JQuery Mobile and a Java backend for a mobile web application

Efficiently uploading multiple files using AJAX in conjunction with Codeigniter

Output text in Javascript (not to the console)

react validation for dropdown, react-datepicker, and hour input at intermittent intervals