JavaScript: experiencing difficulty incorporating API string into JSON format

Question

JavaScript: experiencing difficulty incorporating API string into JSON format

When I am trying to add values to a JSON object manually, it works fine:

Code:

for (var k = 0; k < result.length; k++) {    
    result[k]["sender"] = k;    
}

https://i.sstatic.net/jnbpw.png

However, when I fetch values from an API and attempt to store them in result[k]["sender"] , the values are not being saved in the JSON object, and instead, they are being printed on the console:

for (var k = 0; k < result.length; k++) {
    var url = "//api";

    $.ajax({
        url: "https://reverse.geocoder.api.here.com/6.2/reversegeocode.json?prox="+result[k]['lat'].toString()+","+result[k]['lon']+"&mode=retrieveAddresses&app_id=***&app_code=***",
        context: document.body,
        success: function (data) {
            console.log(k, typeof data['Response']['View'][0]['Result'][0]['Location']['Address']['Label']);
            result[k]["sender"] = data['Response']['View'][0]['Result'][0]['Location']['Address']['Label'];
        }
    });
}

Error: https://i.sstatic.net/cpoAt.png

Could someone provide guidance on what might be causing this issue?

javascript

Answer 1

Answer №1

Replace var k with let k.

k is incremented during each loop iteration, reaching a final value of result.length when the loop ends.

Initially, your loop runs for result.length iterations, incrementing k each time, and initiates several requests using $.ajax. These requests are asynchronous, meaning their completion and the triggering of the success function occur later, while the rest of the code continues executing.

Subsequently, as the requests finish, they try to access result[k]. However, at that point, k === result.length because the loop has finished, resulting in result[k] being undefined.

By using let, you take advantage of a special feature in ES6 where a let variable within a for loop creates two instances of the variable; one for counting and the other for retaining the value within the loop's closure. This ensures that each iteration of the loop maintains its own k value even after progressing through the loop.

Note: If your url is not static and depends on k at any point, it should also be declared with let to prevent the same issue.

Alternatively, if ES6 is not an option, you can create a new scope using an Immediately-Invoked Function Expression (IIFE) and pass the variable as an argument:

for (var k = 0; k < result.length; k++) {
  (function (k) {
    // Perform $.ajax and other tasks here
  })(k);
}

Alternatively, you could utilize forEach which automatically provides a new variable for each callback execution.

Answer 2

Replace var k with let k.

k is incremented during each loop iteration, reaching a final value of result.length when the loop ends.

Initially, your loop runs for result.length iterations, incrementing k each time, and initiates several requests using $.ajax. These requests are asynchronous, meaning their completion and the triggering of the success function occur later, while the rest of the code continues executing.

Subsequently, as the requests finish, they try to access result[k]. However, at that point, k === result.length because the loop has finished, resulting in result[k] being undefined.

By using let, you take advantage of a special feature in ES6 where a let variable within a for loop creates two instances of the variable; one for counting and the other for retaining the value within the loop's closure. This ensures that each iteration of the loop maintains its own k value even after progressing through the loop.

Note: If your url is not static and depends on k at any point, it should also be declared with let to prevent the same issue.

Alternatively, if ES6 is not an option, you can create a new scope using an Immediately-Invoked Function Expression (IIFE) and pass the variable as an argument:

for (var k = 0; k < result.length; k++) {
  (function (k) {
    // Perform $.ajax and other tasks here
  })(k);
}

Alternatively, you could utilize forEach which automatically provides a new variable for each callback execution.

JavaScript: experiencing difficulty incorporating API string into JSON format

Answer №1

Similar questions

Swap out ASP.NET AJAX with jQuery for making ASHX requests

Populating a clickable list and form with a complex JavaScript object

Storing data with NPM global packages: Best practices

Skip nodes in Polymer 1.0 by using ExcludeLocalNames

Exporting Javascript functions is not possible

changing the name of a variable within ng-include

I'm wondering if you have any insights on how to retrieve objects using Mono WebAssembly

The integration of VueJS with the Canva Button JS API amplifies the

Automatically updating a database value in CodeIgniter after a countdown has expired

JavaScript - Modify the proposed content prior to inserting it into the input field

Mocha: A Unique Perspective on Testing the express.Router Instance

Resetting the selected options in AngularJS dropdown lists

The state in Reactjs is not displaying as expected

What is the best way to store a username and password within a JavaScript object in ReactJS?

Initialization of Arrays with Default Values

How do I retrieve the HSL value for a color selected using an input of type 'color' in JavaScript?

The functionality of the date picker is hindered when a dropdown with multiple selections is activated, and conversely, the multi-selection feature of

What is causing the onclick event to not function properly when called from an external .js file?

Can JavaScript be used to dynamically update drop down lists in a gridview?

The NPM version needs to be updated as it is outdated