Accessing HTMLCollection

help
1

Hello, I am very new to Meteor. I am looking at refactoring a project from vanilla JS to a framework. After some research and tutorial builds, I decided I really liked Meteor, in particular Meteor with React. However, there are a lot of pieces I don’t get yet, and thus, I am currently trying to access an json object generated by document.getElementsByClassName('blahblah"). I can clearly print the collection to console, but collection[0] returns undefined and collection.item(0) returns null. This is being done in a method inside Meteor.methods(). Could someone explain to me if this is a Meteor thing, React thing, or just my own foolishness?

Thanks!

Here is link to project code: https://github.com/jwsomis/Cesium-on-Meteor

Edit: Here is the code.

if (Meteor.isClient) {
  Meteor.startup(function() {
    $.getScript('http://....../Cesium.js");
    Meteor.call("function that sets up Cesium called here");
  });
  Meteor.call("initalize");
});

Meteor.methods({
  initialize() {
    var toolbars = document.getElementsByClassName("cesium-viewer-toolbar");
    console.log(toolbars)                     //shows json object with correct data and length 1
    var toolbar = toolbars[0]
    console.log(toolbar)                       //prints undefined
});
2

It will be hard to help without seeing some code!

3

A few comments about your code

if (Meteor.isClient) {
  Meteor.startup(function() {
    $.getScript('http://....../Cesium.js");
    Meteor.call("function that sets up Cesium called here"); // <-- Hope it is just a sample
  });
  Meteor.call("initalize");
});

Meteor.methods({
  initialize() {  // <-- Are you shure we are on the Client here?
    var toolbars = document.getElementsByClassName("cesium-viewer-toolbar"); // <-- it is better to call document.querySelectorAll('.cesium-viewer-toolbar')
    console.log(toolbars);                     // <-- logs an array of DOMElements (not JSON ar any JS Object)
    var toolbar = toolbars[0]; 
    console.log(toolbar);  // <-- logs first node (HTMLElement)
});
4

Note 1.) Yes, it is just a sample
Note 2.) I was wondering about this. I have seen sample code where Meteor.methods is instantiated inside if(isClient), but the sample React toDo App has it outside, so I followed that design.
Note 3.) Thanks for the tip. Can you tell me more about why that’s the case?
Note 4&5.) OK, but it should still be displaying an element, as opposed to undefined. console.log(toolbars) shows an element in the 0 position, but console.log(toolbar) prints undefined. I don’t understand how that could be the case.

5

It works like a $(). It means you coud do the thing like document.querySelectorAll("[data-action=openDialog]") or document.querySelectorAll(“ul > li > a.active”). It is a native function and most of time it works a lil faster then others

Oh, cant imagine what happend. Please share your app (or part) to get more digging.

Client side or shared methods is OK. But note that in a shared method you can not touch document.getElementsByClassName, because when it runs on the Server it causes an error

6

Ah, that makes sense. I greatly appreciate the info. Let me double check if I have anything that would prevent me from sharing it (company stuff and all that), but I’ll try to post it. Again, thanks for the help.

7

Here is a link to the github project: https://github.com/jwsomis/Cesium-on-Meteor

8

As a side note. I tried using querySelectorAll and it failed to return anything where getElementsByClassName was succesful.

9

querySelectorAll works fine. Note you should use a valid css selector (use “.className”, dot-prefixed, like “.btn”). And found your sample works fine for me and I’ve got an array of elements where toolbars[0] returns first element as expected