Type script and Azure POI values

Question

I am new to React/Type script

1. trying to figure out how I can access the value of the variable data2 for my return statement

2. How I can add the results to a collection and have the entire collection available outside of the block. So maybe like a dataSource collection.

3. Want to be able to return dataSource collection to the calling function.

    const getAllLocations = (query: string): GeoJSON.FeatureCollection<GeoJSON.Point> => {
        let data2: GeoJSON.FeatureCollection<GeoJSON.Point> = {};
        let dataSource = {};
        searchURL
          .searchPOI(atlasService.Aborter.timeout(10000), query, {
            maxFuzzyLevel: 4,
            view: "Auto",
          })
          .then((results) => {
            data2 = results.geojson.getFeatures();
            console.log("inside");
            console.log(data2);
            dataSource.Add(data1);
          });
        console.log("outside");
        console.log(data2);
        console.log(datasource);
        return data2, datasource;  // Both these are empty
    };
   

Answer 1

Not sure of the purpose of the dataSource in your code. You add data1 to it, but that's undefined in your code. Note that there is a DataSource class in Azure Maps for use with the map. If you are trying to use that, you should create that outside of the function and reuse it. Here is a good example: https://azuremapscodesamples.azurewebsites.net/index.html?sample=Load%20POIs%20as%20the%20map%20moves

1. The console log statements after 'outside' will have no data since the data hasn't been loaded yet. Calling any service is an asynchronous process. Azure Maps makes use of promises (then) as ways to notify you when the service has responded. Your current code is trying to return the data synchronously and that will never happen. The same would be true if you tried making a fetch call (exact same principal). What you can do is have your function return a promise and then in the code you use to call this function, handle it accordingly, or add your post processing code in the "then" function.

2. One way is to add it to the data source in the "then" function. Once it is added there, it will be available in the rest of your app. For example:

const getAllLocations = (query: string): GeoJSON.FeatureCollection<GeoJSON.Point> => {
     let data2: GeoJSON.FeatureCollection<GeoJSON.Point> = {};

     searchURL
       .searchPOI(atlasService.Aborter.timeout(10000), query, {
         maxFuzzyLevel: 4,
         view: "Auto",
       })
       .then((results) => {
         data2 = results.geojson.getFeatures();
         console.log("inside");
         console.log(data2);
//Do something with the response. 
       });
 };

3. Functions in JavaScript (and most programming languages) can only return a single result. If you want to return multiple results you need to wrap them into a single object. For example:

return {
    data2: data2,
    dataSource: dataSource
};