javascript iterate json data into geojson for leaflet

Question

I have some json data that I want to use in a leaflet map. I need to convert the json format into the geojson format used by leaflet. I also want to sort the data into Friends and Family so I can identify them separately on the map.

I have succesfuly fetch(ed) the data file and used a switch staement to sort the data into Friends case and Family case. Inside each case I handle converting the data into geojson format.

My problem is that I have not been able to figure out how to use the variables myFriends and myFamily outside of the function getData so that I can plot the points on the map.

This is all just fake data that I am using to learn how to use leaflet. Ultimately I hope to get this data through a stream to track up to the moment position data.

In my code I am able to output the data to the console by moving the console.log(myFriends); inside the function.

What I am trying to get 2 variables myFriends and myFamily each containing all of the iterated data.

Original JSON Data

[
    {
"time" : 0.00, 
"ID" : 51, 
"name" : "John",
"relationship" : "Friend",
"Lat" : 56.166609, 
"Long" : 27.157364
},
{
    "time" : 0.00, 
    "ID" : 52, 
    "name" : "Sally",
    "relationship" : "Friend",
    "Lat" : 55.895501, 
    "Long" : 26.753631
    },
    {
        "time" : 0.00, 
        "ID" : 50, 
        "name" : "Tom",
        "relationship" : "Family",
        "Lat" : 56.236112,
        "Long" : 26.168675
        }
]

var myFriends =

{
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                   56.166609, 27.157364
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "John"
            },
            "id": 51
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                   55.895501, 26.753631
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "Sally"
            },
            "id": 52
        },
        
    ]
};

var myFamily =

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "popupContent": "Tom"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [56.236112, 26.168675]
            }
        },
       
    ]
};

Program Code

async function getData() {

const response = await fetch('data.json');
var data = await response.json();
//console.log(data);
for (var i = 0; i < data.length; i++){
    var unit = data[i];

var relationship = unit.relationship;

switch (relationship) {
  case "Friends":
    var myFriends = {
        "type": "FeatureCollection",
        "features": [
            {
                "geometry": {
                "type": "Point",
                "coordinates": [
                unit.Lat + " , " + unit.Long
                ]
                            },
                "type": "Feature",
                "properties": {
                "popupContent": unit.name
                            },
                "id": unit.ID
            },     
                ]
                    };

    break;
  case "Family":
    console.log("Family");
    console.log(unit);  

}

    }
}

getData();


console.log(myFriends);

Answer 1

Your function is an asynchronous function, which means it returns a promise. Therefore, when you call your function you need to wait for its result using await. To make it work you need to

1. modify your function to return the data you want.

2. use await where you call your getData function

   var result = await getData();

Answer 2

The scope of your var myFriends is limited to the function getData(). To access it outside of getData() you need to return it at the end.