如何访问 html 文件中加载的 JSON 值？

Question

我正在尝试从我的 JSON 文件中获取坐标并将它们提供给 HTML 文件内的 Mapbox，而无需手动输入数据。我查看了一些帖子，发现其中一个将 json 加载到我的 HTML 文件中。

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
  xobj.open('GET', 'C:\Users\ArkPr\yelp\restaurants.json', true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);  
}
loadJSON(function(json) {
  var actual_JSON = JSON.parse(json);

这很好，但我不知道如何访问我想要的 JSON 文件中的值，即坐标。

{
  "type": "featurecollections",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.153788,
          51.513878
        ]
      }
    },
   {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.162122,
          51.485349
        ]
      }
    },
// etc...

并让它们使用接下来的几行代码在地图上放置标记。

for (const { geometry, properties } of actual_JSON.features) {
  // create a HTML element for each feature
  const el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el).setLngLat(geometry.coordinates).addTo(map);
}

我错过了什么能让这一切按预期工作？

Answer 1

你的 for 循环应该是这样的：

var json = {
  "type": "featurecollections",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.153788,
          51.513878
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.162122,
          51.485349
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.101429,
          51.513136
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.138386,
          51.512087
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -100.445882,
          39.78373
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.192881,
          51.504062
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.089901,
          51.505143
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -100.445882,
          39.78373
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.139175,
          51.492591
        ]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -100.445882,
          39.78373
        ]
      }
    }
  ]
}

for (let feature of json.features) {    
  const el = document.createElement('div');
  el.className = 'marker';
  
  console.log(feature.geometry.coordinates);
}

您还需要将与 map 相关的所有内容移动到 loadJson() 方法中，并将两者结合起来，您最终会得到如下结果：

function loadJSON(callback) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open("GET", "C:\Users\ArkPr\yelp\restaurants.json", true);
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);
}

loadJSON(function(json) {
  mapboxgl.accessToken = ':3';

  const map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v11",
    center: [-0.19346, 51.50405],
    zoom: 9
  });

  for (let feature of json.features) {
    const el = document.createElement('div');
    el.className = 'marker';

    // make a marker for each feature and add to the map
    new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
  }
});

Answer 2

您可以使用类似 https://www.npoint.io/ 的在线模拟 JSON 服务器，代码将类似于；

$.getJSON("https://api.npoint.io/43c8857fb1f218a3b356", null, (actual_JSON)=>{
  actual_JSON.features.forEach((feature)=> {
    const el = document.createElement('div');
    el.className = 'marker';
    new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
  });
});

如何访问 html 文件中加载的 JSON 值？

How to access JSON values that are loaded inside of a html file?

javascript

json

mapbox

mapbox-gl-js