使用 lat 和 lon 加载JSON 并获取变量

Question

I am loading JSON file and I want to take the latitude and longitude variables from file. Am doing it with let lat = row.get('lat'); but it doesn't work and in the const pix = yMap.latLngToPixel(data.lat,data.lon); it says that it doesn't recognize it . How can I do it to work right, 'cause after that I want to take the json file from localhost, this is why I am using a p5.js library.

<title>Mappa </title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/mappa-mundi@0.0.4" type="text/javascript"></script>
<script src="mappa.js" ></script>

Json.file (like the one that I will take from localhost)

{"conflicts":[
{ "Place":"Afganistan",
"lat":33.0000,
"lon":65.0000 }
,
{"Place": "Koln",
"lat":17.0500,
"lon":-61.8000}
,
 {"Place": "ai",
 "lat":18.2500,
 "lon": -63.166}

  ]
 }
  }

js.file

let data;

let myMap;
let canvas;

const mappa = new Mappa ('Leaflet');

const options = {
lat: 39.074207, 
lng: 21.824312,
zoom: 2,
style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
}

function preload(){
data = loadJSON ("conflicts.json");

//var jsonData = JSON.parse(data);

}



function setup(){

canvas = createCanvas(1350,600); 
myMap = mappa.tileMap(options); 
myMap.overlay(canvas);


 let lat = row.get('lat');
 let lon = row.get('lon');

}

 function draw() {
clear();
const pix = myMap.latLngToPixel(data.lat,data.lon);
fill (255,0,200);
ellipse (pix.x,pix.y,20,20); 
}

Answer 1

Your data is a an object with a single property which is an array. To access each element in this array, you need to iterate it:

 for (let item of data.conflicts)
    draw(item)


 function draw(item) {
    const pix = myMap.latLngToPixel(item.lat, item.lon);
    fill (255,0,200);
    ellipse (pix.x,pix.y,20,20); 
 }