将javascript转换为json? [英] Convert javascript to json?

问题描述

我正在使用传单，并且我注意到许多示例使用单独的js文件，其中将变量设置为JSON流.

I'm working with leaflets and I've noticed that many examples use a separate js file where a variable is set to a JSON stream.

我将如何修改以下示例，以便它可以使用geojson读取json文件并且在javascript中没有变量声明?

How would I be able to modify the following example so that it can read off a json file with the geojson and not have the variable declaration in the javascript?

代码如下:

<script type="text/javascript">

    var geoJsonData = {
        "type": "FeatureCollection", 
        "features": [
            { "type": "Feature", "id":"1", "properties": { "address": "2"   }, "geometry": { "type": "Point", "coordinates": [175.2209316333,-37.8210922667 ] } },
            { "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [175.2238417833,-37.80975435   ] } },
            { "type": "Feature", "id":"3", "properties": { "address": "21"  }, "geometry": { "type": "Point", "coordinates": [175.2169955667,-37.818193     ] } },
            { "type": "Feature", "id":"4", "properties": { "address": "14"  }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963    ] } },
            { "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
            { "type": "Feature", "id":"6", "properties": { "address": "38"  }, "geometry": { "type": "Point", "coordinates": [175.2209942   ,-37.8192782833 ] } }
        ]
    };

    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    var map = L.map('map')
            .addLayer(tiles);

    var markers = L.markerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());
</script>

我知道可以用$.getJSON完成，但是如果可能的话，我宁愿使用L.geoJson.

I know it can be done with $.getJSON, but I would prefer using L.geoJson, if possible.

推荐答案

要从文件中读取JSON数据，可以使用fetch函数(

To read JSON data from a file you can use the fetch function (read more).

这里是一个例子:

fetch('http://example.com/movies.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        // Do something with the JSON data
        console.table(myJson);
    });

在您的情况下:

function doSomething(geoJsonData) {
    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    var map = L.map('map')
            .addLayer(tiles);

    var markers = L.markerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());
}

fetch('http://myserver.com/myfile.json')
    .then(function(response) {
        return response.json();
    })
    .then(doSomething)
    .catch(function(err) {
        // In case of error, display the error message
        console.error(err);
    });

请注意，由于fetch函数是异步的，因此我将您的代码放入了回调函数中.

Notice that I put your code inside a callback function, as the fetch function is asynchronous.

这篇关于将javascript转换为json?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！