上传 .json 并存储其变量答案

【问题标题】：uploading an .json and storing its variables上传 .json 并存储其变量
【发布时间】：2017-05-06 01:23:54
【问题描述】：

我目前是 js 和 mongoDB 的初学者，目前正在学习流星。我在尝试在 mongo 中填充数据库时遇到问题。我有一个 .txt 中的 db 文件（我已将格式更改为 JSON 试图解决这个问题），我想用它填充 mongo。（实际上，在项目中我的想法是更新/增加/merge db，每个月使用另一个 .txt 文件，这样每个月都会使用一个新的 .txt 文件填充 db。）

这个想法是使用数据库，输入生成图形，并在正确填充后执行其他几个计算。

我尝试了几个教程，但似乎没有一个有效。所以我要么无法显示结果（HTML新手），要么我很愚蠢，可以在这里做一些超出限制的事情。

代码如下：

Mais.js（服务器）：

import { Meteor } from 'meteor/meteor';

Meteor.startup(() => {
  Collection = new Mongo.Collection('db');
  // code to run on server at startup
});

Mais.js（客户端）；

import './main.html';

Collection = new Mongo.Collection('db');

Template.Upload_1.onCreated(
  function helloOnCreated(){}
);

Template.Upload_1.helpers({
  db : function() { return Collection.find();},
});

Template.Upload_1.events({
  'onclick Process': function(){
    var reader = new FileReader();
    var jsonParser = new JSONParser();
    var jsonObject = jsonParser.parse(reader);
    var test0 =  jsonObject.get("test0"); //just choose the first .txt entry value for testing, but will add other ones 

    Collection.insert(test0);    
  }
});

main.html

<head><title>test5</title></head>
<body>
{{> Upload_1}}
<p></p>
<p></p>
</body>

<template name="Upload_1">
  <div class = "container">
  <header><h1>File_READ</h1>
    <input type="file" id="fileinput" />
    <input type="submit" id="Process" value="Process"/>
  </header></div>
  <body>
    <h2>Results</h2>
    {{#each db}}
      <p> {{> Collection}}</p>
    {{/each}}
   </body>
</template>

.json 文件（或 .txt）示例：

[
    { test0: "01/02/03", test1: "10", test2: "11", test3: "101" },
    { test0: "02/02/03", test1: "20", test3: "12", test3: "102" },
    { test0: "03/02/03", test1: "30", test3: "13", test3: "103" },
  ]

我目前正在使用 METEOR@1.4.2.3 版本。

有没有更简单的方法来做到这一点？

如果有任何初学者教程来学习如何做到这一点，我也将不胜感激！

【问题讨论】：

参见this answer，它解释了如何使用 mongoimport 将数据从文件导入到 MongoDB 数据库中。

标签： meteor

【解决方案1】：

听起来您不确定您的数据是否在 Mongo 中。您可以在命令行上运行 mongo 进行检查，或者使用 RoboMongo 等工具进行检查。假设您的数据存在，我将继续。

您在模板中看不到数据并不奇怪，您有几个问题。首先，您没有在任何地方订阅数据。其次，您没有正确迭代从 find() 返回的任何结果。第三，你还公开你的数据吗？

首先，更新您的 onCreated() 以订阅该集合：

Template.Upload_1.onCreated(function() {
  this.subscribe('items');
});

这将调用服务器上的发布，因此您需要其中之一：

Meteor.publish('items', function() {
    return Collection.find({});
}

您必须确保您的 Collection 变量在那里可用，而且我显然没有包含任何安全性。您会注意到我选择将出版物称为“项目”。您可以随意调用它，但您需要订阅相同的名称。

（顺便说一句，如果您启用了 autopublish 包 [默认情况下已启用]，那部分将自动为您发生。但我从不使用它，所以我不知道该出版物将被称为什么。你不会无论如何都不要在生产应用程序中使用该包）。

您的助手没问题，但模板代码不正确。试试这样的：

{{#each item in db}}
  <p> {{item.test0}}</p>
{{/each}}

您的代码表明存在一个名为“集合”的模板，我认为这不是您想要的。使用上面的代码，它将为数据库中的每个项目循环，然后您可以访问您想要的任何字段。

编辑：

我刚刚看到您的点击处理程序。您可能应该在服务器上加载该数据，但在此之前，是否调用了处理程序？我怀疑不是。我想你想要这个：

'click #Process': function() {

你想要点击，而不是点击，选择器就像 jQuery。由于您使用的是 id，因此您可以使用哈希选择它。

【讨论】：

您好 Zim，感谢您对此的反馈！，我[已经设法更正了代码，现在我可以在浏览器中看到来自 DB 的输出（为此，我做了一个手动 db insert ，只是为了填充数据库，现在正在根据需要打印结果。）但是，我仍然面临读取文件和 JSON 解析的问题。我在控制台“ReferenceError：JSONParser 未定义”中收到此消息。我也尝试了一些方法来扭转这种情况，但没有成功。
你可能需要导入 JSONParser。如果您已经有，您可以使用当前代码副本在原始问题中添加“更新”部分吗？
好的，我做了一个更新，作为一个新的答案。再次感谢！

【解决方案2】：

更新：

更改后建议代码如下：

Main.js：

import './main.html';

Collection = new Mongo.Collection('db');

Template.Upload_1.onCreated(function() {
  this.subscribe('items');
});

Template.Upload_1.helpers({
  db : function() { return Collection.find();},
});

Template.Upload_1.events({
  'click #Process': function(){
    var reader = new FileReader();
    var jsonParser = new JSONParser();
    var jsonObject = jsonParser.parse(reader);
    var test0 =  jsonObject.get("test0"); //just choose the first .txt entry value for testing, but will add other ones
    var test1 =  jsonObject.get("test1");
    var test2 =  jsonObject.get("test2");
    var test3 =  jsonObject.get("test3");

    db.insert(test0);
    db.insert(test1);
    db.insert(test2);
    db.insert(test3);
  }
});

main.html:

<head><title>test5</title></head>
<body>
{{> Upload_1}}
<p></p>
<p></p>
</body>

<template name="Upload_1">
  <div class = "container">
  <header><h1>File_READ</h1>
    <input type="file" id="fileinput" />
    <input type="submit" id="Process" value="Process"/>
  </header></div>
  <body>
    <h2>Results</h2>
    {{#each items in db}}
      <p> {{items.test0}} </p>
        <p> {{items.test1}} </p>
        <p> {{items.test2}} </p>
        <p> {{items.test3}} </p>
    {{/each}}
   </body>
</template>

main.js（服务器）：

import { Meteor } from 'meteor/meteor';

Meteor.startup(() => {
Collection = new Mongo.Collection('db');

});
Meteor.publish('items', function() {
    return Collection.find({});
});

现在，JSON 包已经加载：我的应用程序上运行了以下软件包：

autopublish            1.0.7  (For prototyping only) Publish the entire database to all clients
blaze-html-templates   1.0.5  Compile HTML templates into reactive UI with Meteor Blaze
ecmascript             0.6.1  Compiler plugin that supports ES2015+ in all .js files
es5-shim               4.6.15  Shims and polyfills to improve ECMAScript 5 support
insecure               1.0.7  (For prototyping only) Allow all database writes from the client
jquery                 1.11.10  Manipulate the DOM using CSS selectors
json                   1.0.3  Provides JSON.stringify and JSON.parse for older browsers
meteor-base            1.0.4  Packages that every Meteor app needs
mobile-experience      1.0.4  Packages for a great mobile user experience
mongo                  1.1.14  Adaptor for using MongoDB and Minimongo over DDP
reactive-var           1.0.11  Reactive variable
shell-server           0.2.1  Server-side component of the `meteor shell` command.
standard-minifier-css  1.3.2  Standard css minifier used with Meteor apps by default.
standard-minifier-js   1.2.1  Standard javascript minifiers used with Meteor apps by default.
tracker                1.1.1  Dependency tracker to allow reactive callbacks

现在我可以看到集合的内容（手动插入以进行测试）但我收到以下错误（在控制台上看到）：

ReferenceError: JSONParser is not defined

并且数据库中没有填充 JSON 文件中的数据，可能是我以错误的方式调用了解析器。

【讨论】：

我不知道 JSONParser 来自哪里，浏览器也不知道。你在哪里得到它？为什么不用浏览器内置的用户 JSON.parse()？
另外，根据你所拥有的一切，这是错误的：new Mongo.Collection('db')。应该是：new Mongo.Collection('items')。
find 在 collections 变量上运行，所以任何数据库都可以工作，而且它工作，无论如何，我改变了它，创建了另一个集合（项目）。 JSON.parse(reader) 无法将 filereader 识别为解析对象，这可能是问题所在......