如何在 Node.js 上加载 JSON 数据答案

【问题标题】：How to load JSON data on Node.js如何在 Node.js 上加载 JSON 数据
【发布时间】：2014-03-31 12:49:37
【问题描述】：

我正在使用 Node/express.js 加载 JSON 数据并将其绘制在地图上。作为第一个开始，我受到 repp 传单-geojson-stream 中提供的示例的启发。 https://github.com/tmcw/leaflet-geojson-stream/tree/master/example

客户： https://github.com/tmcw/leaflet-geojson-stream/blob/master/example/client.js

var L = require('leaflet'),
    leafletStream = require('../');

L.Icon.Default.imagePath = 'http://leafletjs.com/dist/images';

window.onload = function() {
    var div = document.body.appendChild(document.createElement('div'));
    div.style.cssText = 'height:500px;';
    var map = L.map(div).setView([0, 0], 2);
    L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    var gj = L.geoJson().addTo(map);
    leafletStream.ajax('/points.geojson', gj)
        .on('end', function() {
        });
};

服务器： https://github.com/tmcw/leaflet-geojson-stream/blob/master/example/server.js

var express = require('express'),
    browserify = require('browserify'),
    app = express();

app.get('/', function(req, res) {
    res.send('<html><head><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /></head><body><script src="bundle.js"></script></html>');
});

app.get('/bundle.js', function(req, res) {
    var b = browserify();
    b.add('./client.js');
    b.bundle().pipe(res);
});

app.get('/points.geojson', function(req, res) {
    res.write('{"type":"FeatureCollection","features":[');
    var i = 0, die = 0;
    function send() {
        if (++i > 20) {
            res.write(JSON.stringify(randomFeature()) + '\n,\n');
            i = 0;
        } else {
            // it seems like writing newlines here causes the buffer to
            // flush
            res.write('\n');
        }
        if (die++ > 1000) {
            res.write(JSON.stringify(randomFeature()));
            res.write(']');
            res.end();
            return;
        }
        setTimeout(send, 10);
    }
    send();
});

app.listen(3000);

function randomFeature() {
    return {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [
                (Math.random() - 0.5) * 360,
                (Math.random() - 0.5) * 180
            ]
        },
        properties: {}
    };
}

在项目中，他们创建随机的 json 文件。我想读取 json 文件，然后绘制它。我想“流数据”的原因是处理文件的大小（我知道有更好更简单的方法来加载 json 数据），但我想使用这个模块。

我修改了服务器脚本：

var express = require('express'),
    browserify = require('browserify'),
    app = express();

app.get('/', function(req, res) {
    res.send('<html><head><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /></head><body><script src="bundle.js"></script></html>');
});

app.get('/bundle.js', function(req, res) {
    var b = browserify();
    b.add('./client.js');
    b.bundle().pipe(res);
});

var o = require('../output_.geojson');

app.get('/points.geojson', function(req, res) {
         res.json(o);
});

app.listen(3000);

    res.write('');

但我收到错误：

/Users/macbook/leaflet-geojson-stream/output_.geojson:1
(function (exports, require, module, __filename, __dirname) { "type":"FeatureC
                                                                    ^
SyntaxError: Unexpected token :
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/macbook/leaflet-geojson-stream/example/server.js:15:9)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)

谁能提示我应该怎么做才能读取和加载 json 外部文件以绘制数据。

【问题讨论】：

标签： javascript json node.js leaflet

【解决方案1】：

: 不是预期的，因为此时您在一个函数中。

要解析 JSON，您只需调用 JSON.parse()，如 How to parse JSON using Node.js? 中所述。所以你读取文件，获取其中的 JSON 字符串，然后通过JSON.parse()

【讨论】：

我正在使用 express.js，所以我通过这个函数获取文件：app.get('/points.geojson', function(req, res) { res.json(o); } )
然后在返回的字符串上调用 JSON.parse();)
那么你得到什么作为返回值呢？你能复制一下吗？
我收到与上述相同的错误消息
如前所述，此处不应出现 : ，因为此时您定义的是函数，而不是对象。那只是语法错误，与JSON问题无关

【解决方案2】：

您当前正在通过“请求”将整个 JSON 文件加载到内存中。

您想要流式传输文件，因为它很大，因此使用 fs.createReadStream 函数：

var fs = require('fs');

app.get('/points.geojson', function(req, res) {
  res.setHeader('Content-Type', 'application/json');
  fs.createReadStream(__dirname + '../output_.geojson').pipe(res);
});

还要确保 ../output_.geojson 的内容实际上是有效的 JSON。您可以使用JSONLint 来检查 - 文件应该带有 '{' 或 '[' 并且内部没有 Javascript 函数。

【讨论】：

但是如果您要流式传输文件，您将如何将其转换为 JSON？我还没有听说过任何可以做到这一点的函数，无论如何都不是标准的javascript
重点是将JSON的内容获取到浏览器中，所以你不需要转换它。 JSON 是文本。只有在您解析了文本后，它才会成为内存中的对象。您希望该对象在浏览器的内存中。因此，将 JSON 解析为服务器上的对象并不是一个好计划 :)
你也可以决定将 JSON 转换为一个对象并在那里绘制它，只将图形发送给客户端，因为你不知道客户端有多少内存可供你使用，但服务器可能。在我看来，向客户端发送大量数据比将其临时放入服务器内存要糟糕得多。
然后我们就在不知何故过滤流的土地上。您没有将整个数据转储到浏览器是正确的，但同样的问题在繁忙的服务器上成倍增加了一千倍。
@Bino Carlos：如果我非常了解你的话。这样可以解决问题，但不是一个好方案