Tips for transferring variables to my callback function or something similar

Question

Tips for transferring variables to my callback function or something similar

I'm facing a challenge with passing the markersArray to the callback function in order to push the results into the relevant array. The issue arises when trying to request nearby amenities for each filter and store them in separate arrays as per the comments in the code.

Despite numerous attempts, I haven't been able to find a solution yet.

Any help or suggestions would be greatly appreciated.

Edit: To clarify, I need to iterate through the filters 4 times and collect the results in 4 different arrays.

javascript arrays function variables callback

Answer 1

Answer №1

Instead of directly passing the callback function reference, consider using an IIFE. This way, the IIFE takes makersArray as an argument and returns a function that will serve as the callback. Within this function, the arguments passed to the IIFE invocation will be accessible.

  for (i = 0; i < filterArray.length; i++) {

    //...

    service.nearbySearch(request, ((markersArray, counter) => 
      (results, status) => {
         // markersArray can be accessed here
         // utilize results[counter] ...
      }
    )(markersArray, i));

  }

Edit: makersArray => markersArray

Update: Since an async function (service.nearbySearch) is being called inside a for loop, it's necessary to also pass the loop counter into the IIFE. In this scenario, use counter rather than i within the callback function.

Answer 2

Instead of directly passing the callback function reference, consider using an IIFE. This way, the IIFE takes makersArray as an argument and returns a function that will serve as the callback. Within this function, the arguments passed to the IIFE invocation will be accessible.

  for (i = 0; i < filterArray.length; i++) {

    //...

    service.nearbySearch(request, ((markersArray, counter) => 
      (results, status) => {
         // markersArray can be accessed here
         // utilize results[counter] ...
      }
    )(markersArray, i));

  }

Edit: makersArray => markersArray

Update: Since an async function (service.nearbySearch) is being called inside a for loop, it's necessary to also pass the loop counter into the IIFE. In this scenario, use counter rather than i within the callback function.

Answer 3

Answer №2

Upon analyzing your code, I have noticed another method to retrieve the markersArray from the caller during debugging. However, it is unclear how you intend to display the markersArray on your map. Once you have implemented this into your code successfully, kindly share the working version for further assistance in comprehension.

GIT Repository Link: https://github.com/helloritesh000/how-to-pass-variable-to-my-callback-function-or-similar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Interactive Map</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        html, body {
        margin: 0;
        }
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>

    <input id="mapLatitude" type="hidden" value="51.571527">
    <input id="mapLongitude" type="hidden" value="-0.149113">
    <input id="amenityType" type="hidden" value="school">
    <input id="markerIcon" type="hidden" value="assets/img/mapMarkerIcos-schools.png">

    <div id="map"></div>

    <button class="mapFilter" data-filter="school">schools</button><br>
    <button class="mapFilter" data-filter="restaurant">restaurants</button><br>
    <button class="mapFilter" data-filter="subway_station">stations</button><br>
    <button class="mapFilter" data-filter="convenience_store">shops</button><br>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNPO77AnQOdXcUhisHtfu_RP0Ha3bZKn8&libraries=places"></script>
    <script src="assets/js/main.js"></script>


    <script type="text/javascript">
        /* 
          Remaining code with potential improvements goes here
        */
    </script>
</body>
</html>

Answer 4

Upon analyzing your code, I have noticed another method to retrieve the markersArray from the caller during debugging. However, it is unclear how you intend to display the markersArray on your map. Once you have implemented this into your code successfully, kindly share the working version for further assistance in comprehension.

GIT Repository Link: https://github.com/helloritesh000/how-to-pass-variable-to-my-callback-function-or-similar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Interactive Map</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        html, body {
        margin: 0;
        }
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>

    <input id="mapLatitude" type="hidden" value="51.571527">
    <input id="mapLongitude" type="hidden" value="-0.149113">
    <input id="amenityType" type="hidden" value="school">
    <input id="markerIcon" type="hidden" value="assets/img/mapMarkerIcos-schools.png">

    <div id="map"></div>

    <button class="mapFilter" data-filter="school">schools</button><br>
    <button class="mapFilter" data-filter="restaurant">restaurants</button><br>
    <button class="mapFilter" data-filter="subway_station">stations</button><br>
    <button class="mapFilter" data-filter="convenience_store">shops</button><br>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNPO77AnQOdXcUhisHtfu_RP0Ha3bZKn8&libraries=places"></script>
    <script src="assets/js/main.js"></script>


    <script type="text/javascript">
        /* 
          Remaining code with potential improvements goes here
        */
    </script>
</body>
</html>

Tips for transferring variables to my callback function or something similar

Answer №1

Answer №2

Similar questions

Concern with Json Data Structure

Using the `ng-repeat` directive as an argument in a Javascript function

Designing the presentation of two overflowing text containers positioned next to each other

Can jQuery be used in Chrome Extensions?

Exploring Arrays of Objects in Couchbase

Utilizing useState() to manage active link state in Navigation bar component

Encountering an unforeseen change in the "buttonText" attribute

Extracting data from a PHP array and generating JSON output

Obtain the HTML5 data attribute from an event directly in the code

Limit the implementation of Angular Material's MomentDateAdapter to strictly within the confines of individual

What is the best way to incorporate various variables into the heading of my plot design?

Dividing a string in JavaScript to generate fresh arrays

display hidden sections, not entire pages

Chart.js is failing to display the chart when integrated with RequireJS

Absence of event firing in .on method in Asp.NET Core 6 when using JQuery

Save checkbox selection in PHP Session and display it

Can you provide an alternative code to access an element with the id of 'something' using vanilla JavaScript instead of jQuery's $('#something') syntax

The Material-UI selector isn't functioning properly for me

Dealing with errors in a sequelize ORM query: Tips and tricks

Using Angular 4 with Bootstrap dropdowns necessitates the use of Popper.js