上传.json并存储其变量

时间:2016-12-20 18:23:22

标签: meteor

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

这个想法是使用db,input来生成图形,并在正确填充后执行其他几个计算。

我已经尝试了几个教程,但似乎都没有。 所以我要么不能显示结果(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发布。

有更简单的方法吗?

如果有任何初学者教程学习如何做到这一点我也会很感激!

2 个答案:

答案 0 :(得分:0)

听起来你不确定你的数据是否在Mongo中。你可以在命令行上运行mongo来检查,或者抓住像RoboMongo这样的工具来检查。我将继续假设您的数据存在。

我不会感到惊讶你无法看到模板中的数据,那里有几个问题。首先,您没有订阅数据。第二,你没有正确地迭代从find()返回的任何结果。第三,你甚至发布你的数据吗?

首先,更新你的onCreated()以订阅集合:

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

这将调用服务器上的发布,因此您需要其中一个:

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

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

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

您的助手没问题,但模板代码不对。尝试这样的事情:

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

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

编辑:

我刚看到你的点击处理程序。您可能应该在服务器上加载该数据,但在此之前,处理程序是否被调用?我怀疑没有。我想你想要这个:

'click #Process': function() {

你想点击,而不是onclick,选择器就像jQuery。因为您使用的是id,所以您可以使用哈希值选择它。

答案 1 :(得分:0)

更新

更改后建议代码如下:

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文件上的数据,可能是以错误的方式调用解析器。