uploading an .json and storing its variables

Question

I'm currently a beginner in js and mongoDB, and currently learning meteor. I'm having issues while trying to populate a db in mongo. I have an db file, that is in .txt(i've changed the format to JSON trying to solve this), and I would like to populate mongo with it.( actually, further in the project my idea is to update/increase/merge the db, every month with another .txt file so the db will be populated every month with a new .txt file.)

The idea is to use the db, input to generate graphs, and perform several other calculations after it is properly populated.

I've tried several tutorials, and none seems to be working. So I'm either not able to show the result(HTML newbie), or I'm dumb enough to be doing something outside limits here.

the code is as follows:

Mais.js(server):

import { Meteor } from 'meteor/meteor';

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

Mais.js (client);

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 file(or .txt) example:

[
    { 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" },
  ]

Im currently using METEOR@1.4.2.3 release.

Is there is an easier way to do this?

If there is any beginner tutorial for learning how to do this i would also appreciate it!

See [this answer](http://stackoverflow.com/questions/15365747/how-to-use-mongoimport-with-my-meteor-application-database) it explains how to use mongoimport to import data into your MongoDB database from a file. — SolarBear, Dec 20 '16 at 18:25

zim · Answer 1 · 2016-12-21T04:39:51.183

it sounds like you're not sure if your data is even in Mongo. you can run mongo on the command line to check, or grab a tool, like RoboMongo, to check. i will proceed assuming your data is present.

i'm not surprised you can't see the data in your template, you have a couple issues there. first, nowhere do you subscribe to the data. second, you're not properly iterating over any results that would be returned from your find(). third, are you even publishing your data?

first, update your onCreated() to subscribe to the collection:

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

this will invoke a publish on the server, so you need one of those:

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

you'll have to ensure that your Collection var is available there, and i obviously haven't included any security. you'll notice i chose to call the publication 'items'. you can call it whatever you want, but you need to subscribe to the same name.

(btw, if you have the autopublish package enabled [it's enabled by default], that part will happen for you automatically. but i never use it so i don't know what the publication will be called. and you wouldn't use that package in a production app anyway).

your helper is okay, but the template code isn't right. try something like this:

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

your code indicated the presence of a template called "Collection", which i don't think is what you wanted. with the code above, it will loop for each item in the db, and you can then access whatever fields you want.

edit:

i just saw your click handler. you should probably be loading that data on the server, but before that, is the handler even being called? i suspect not. i think you want this instead:

'click #Process': function() {

you want click, not onclick, and the selector is like jQuery. since you're using an id, you'd select it with the hash.

Hello there Zim, Thanks for the feedback on this!, i[ve managed to correct the code and now i can see the output from DB in browser( for this i've made an manual db insert, just to populate the db, and the results are now beeing printed as desired.) However, im still facing issues with reading the file and JSON parsing. Im receiving this message in console "ReferenceError: JSONParser is not defined". Ive also tried some things in order to turn around this, but with no sucess . — Cedryck Vallini, Jan 02 '17 at 16:00
you probably need to import JSONParser. if you have already, can you add an "update" section to your original question with a current copy of your code? — zim, Jan 02 '17 at 16:48

score 0 · Answer 2 · answered Jan 02 '17 at 22:11

Update:

After changes suggested the code goes as :

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(server):

import { Meteor } from 'meteor/meteor';

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

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

Now, the JSON package was already loaded: I have the following packages running on my application:

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

Now im beeing able to see the contents of the collections(inserted manually for testing) but im receiving following error (seen on console):

ReferenceError: JSONParser is not defined

and the DB is not beeing populated with the data on JSON file, probably im calling out the parser in a wrong way.

i don't know where that JSONParser comes from, and neither does the browser. where did you get it? why not user JSON.parse(), which is built into the browser? — zim, Jan 02 '17 at 22:23
also, based on everything else you have, this is wrong:new Mongo.Collection('db'). It should be: new Mongo.Collection('items'). — zim, Jan 02 '17 at 22:24
the find is running on the collections variable, so any db would work, and it worked, anyway, ive changed it, creating another colections (items). The JSON.parse(reader) does not recognize the filereader as an parse object maybe this is the problem.... — Cedryck Vallini, Jan 03 '17 at 11:58

uploading an .json and storing its variables

2 Answers2