how to add values into json in javascript?

Question

I am creating a map for drone course and i am using mapbox gl js and draw i am able to create waypoint and get the coordinates but i trying to create multiple course with json with id course, coordinates etc.

Can someone help me thanks.

This function help me create the course:

   map.on('draw.modechange', function(e) { 
    map.on('click', function(e) { 
        if (draw.getMode() == 'draw_polygon') {

            lon = e.lngLat.lng;
            lat = e.lngLat.lat;

            gps[nbPoints][0] = lon;
            gps[nbPoints][1] = lat; 

            nbPoints = nbPoints+1;

            console.log("Longitude : "+lon + " - " + "Latitude : "+lat);
        };
    });
});

I use this function to send the data to my server :

$("#vol").click(function(e)
    {   
        for (var i = 0 ; i < nbPoints; i++) {

            posLon = gps[i][0];  
            posLat = gps[i][1];

            lon = posLon;
            lat = posLat;           

      }

            const obj ={
                        "numero":"3",
                        "r_name":"parcours2",
                        "speed":"6",
                        "actionFinished":"home",
                        "coordinate":
                            {
                                "waypoint":[
                                            {
                                            "longitude":lon,
                                            "latitude":lat,
                                            "EnablePicture":"false",
                                            "PositionBatiment":"gauche",
                                            "altitude":"30"
                                            }
                                        ]
                                    }
                                }   

             const jsonString = JSON.stringify(obj);
             const xhr = new XMLHttpRequest();

             xhr.open("POST", "Api.php", true);
             xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
             xhr.send(jsonString); 

             console.log(jsonString);       

});

Answer 1

Something like this maybe?

$("#vol").click(function (e) {
  const obj = {
    "numero": "3",
    "r_name": "parcours2",
    "speed": "6",
    "actionFinished": "home",
    "coordinate":
    {
      "waypoint": []
    }
  }

  for (var i = 0; i < nbPoints; i++) {
    obj.coordinate.waypoint.push(
      {
        "longitude": gps[i][0],
        "latitude": gps[i][1],
        "EnablePicture": "false",
        "PositionBatiment": "gauche",
        "altitude": "30"
      }
    )

  }



  const jsonString = JSON.stringify(obj);
  const xhr = new XMLHttpRequest();

  xhr.open("POST", "Api.php", true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  xhr.send(jsonString);

  console.log(jsonString);
});

If i understood what you are trying to do correctly