Blended assortments in Meteor

Question

Blended assortments in Meteor

I found a helpful tutorial on building an Ionic/Meteor/Angular app and followed it to the point where I removed autopublish and insecure. Now, I'm diving into data publication and subscription in my project:

Inside my Meteor app's lib/collections.js, I have two MongoDB collections:

Players = new Mongo.Collection('players');
Teams = new Mongo.Collection('teams');

A player has an _id and a name, while a team has an _id and an array of exactly two players:

["someplayerId", "someotherPlayerId"]

In the server-side publications defined in server/publications.js, I currently have:

Meteor.publish('players', function () {
  return Players.find({});
});
Meteor.publish('teams', function() {
    return Teams.find({}, {transform: function(doc) {
        var playerOne = Players.findOne({ _id: doc.players[0]._id });
        var playerTwo = Players.findOne({ _id: doc.players[1]._id });

        doc.playerOne = playerOne;
        doc.playerTwo = playerTwo;

        return doc;
        }
    });
});

In my client-side routes configuration in client/routes.js, I subscribe to these publications for one of my states:

.state('tab.settings', {
  url: '/settings',
  views: {
    'tab-settings': {
      templateUrl: 'client/templates/settings.html',
      controller: 'SettingsCtrl as settings',
      resolve: {
        teams() {
          return Meteor.subscribe('teams');
        },
        players() {
          return Meteor.subscribe('players');
        }
      }
    }
  }
});

But when trying to use the teams data in my code, I am struggling to correctly access the compound data.

The following code snippet triggers an error because playerOne and playerTwo variables are undefined:

  this.helpers({
    players: () => {
      return Players.find({});  
    },
    teams: () => {
      return Teams.find({}, {transform: function(doc) {
        var playerOne = Players.findOne({ _id: doc.players[0] });
        var playerTwo = Players.findOne({ _id: doc.players[1] });

        doc.playerOne = playerOne.name;
        doc.playerTwo = playerTwo.name;

        return doc;
        }
      });
    }
  });

In the template file 'client/templates/settings.html', I want to utilize the transformed team documents. How can I achieve this?

javascript angularjs mongodb meteor ionic-framework

Answer 1

Answer №1

It is likely that your subscriptions are not yet prepared for use. My suggestion would be to utilize template-level code to display the team and subsequently render each player within that team. In your publication:

Meteor.publish('teams', function () {
  return Teams.find({}, {
    transform: function (team) {

      // By implementing this, you will gain access to all players in this team.
      team.players = Players.find({
        _id: { $in: team.players }
      }).map(player => player.name);

      return team;
    }
  });
});

The resulting document structure will be:

{
  _id: '1234',
  players: ['Jeff', 'Tim', 'Steve']
}

Then, inside your template, you can proceed as follows.

{{#if Template.subscriptionsReady}}
  {{#each teams}}
    // With the player array now available within the team, you can make use of it.
    {{#each players}}
      {{this}}
    {{/each}}
  {{/each}}
{{/if}}

Answer 2

It is likely that your subscriptions are not yet prepared for use. My suggestion would be to utilize template-level code to display the team and subsequently render each player within that team. In your publication:

Meteor.publish('teams', function () {
  return Teams.find({}, {
    transform: function (team) {

      // By implementing this, you will gain access to all players in this team.
      team.players = Players.find({
        _id: { $in: team.players }
      }).map(player => player.name);

      return team;
    }
  });
});

The resulting document structure will be:

{
  _id: '1234',
  players: ['Jeff', 'Tim', 'Steve']
}

Then, inside your template, you can proceed as follows.

{{#if Template.subscriptionsReady}}
  {{#each teams}}
    // With the player array now available within the team, you can make use of it.
    {{#each players}}
      {{this}}
    {{/each}}
  {{/each}}
{{/if}}

Answer 3

Answer №2

After some experimentation, I have found a solution to my initial question. On the server side, I created two publications:

Meteor.publish("players", function () {
  return Players.find({});
});
Meteor.publish("teams", function () {
  return Teams.find({});
});

These publications are managed in the router for all subroutes under tabs:

  $stateProvider
    .state('tab', {
      url: '/tab',
      abstract: true,
      templateUrl: 'client/templates/tabs.html',
      resolve: {
        players() {
          return Meteor.subscribe('players');
        },
        teams() {
          return Meteor.subscribe('teams');
        }
      }
    })

This approach replicates the functionality of the autopublish package on the client side, which serves its purpose for now.

Now, on the client side, I can modify data using the following code:

  this.helpers({
    data: () => {
      return Teams.find({}, {transform: function(doc) {
        doc.playerOne = Players.findOne({ _id: doc.players[0]._id });
        doc.playerTwo = Players.findOne({ _id: doc.players[1]._id });
        return doc;
        }
      });
    }
  });

I can then utilize the data variable in my templates like so:

  <ion-item ng-repeat="team in teams.data">
    {{ team.players[0] | player_name }} and {{ team.players[1] | player_name }}
  </ion-item>

The player_name filter is a simple Angular filter defined as follows:

angular
  .module('PLeague')
  .filter('player_name', player_name);

function player_name () {
  return function (player) {
    if (!player) return;
    return player.name;
  };
}

Key changes from the original code include the publications for the Teams collection and the modification of how the client-side code handles Teams by retrieving players using findOne with players[x]._id.

Perhaps this adjustment was what was missing initially.

Answer 4

After some experimentation, I have found a solution to my initial question. On the server side, I created two publications:

Meteor.publish("players", function () {
  return Players.find({});
});
Meteor.publish("teams", function () {
  return Teams.find({});
});

These publications are managed in the router for all subroutes under tabs:

  $stateProvider
    .state('tab', {
      url: '/tab',
      abstract: true,
      templateUrl: 'client/templates/tabs.html',
      resolve: {
        players() {
          return Meteor.subscribe('players');
        },
        teams() {
          return Meteor.subscribe('teams');
        }
      }
    })

This approach replicates the functionality of the autopublish package on the client side, which serves its purpose for now.

Now, on the client side, I can modify data using the following code:

  this.helpers({
    data: () => {
      return Teams.find({}, {transform: function(doc) {
        doc.playerOne = Players.findOne({ _id: doc.players[0]._id });
        doc.playerTwo = Players.findOne({ _id: doc.players[1]._id });
        return doc;
        }
      });
    }
  });

I can then utilize the data variable in my templates like so:

  <ion-item ng-repeat="team in teams.data">
    {{ team.players[0] | player_name }} and {{ team.players[1] | player_name }}
  </ion-item>

The player_name filter is a simple Angular filter defined as follows:

angular
  .module('PLeague')
  .filter('player_name', player_name);

function player_name () {
  return function (player) {
    if (!player) return;
    return player.name;
  };
}

Key changes from the original code include the publications for the Teams collection and the modification of how the client-side code handles Teams by retrieving players using findOne with players[x]._id.

Perhaps this adjustment was what was missing initially.

Blended assortments in Meteor

Answer №1

Answer №2

Similar questions

Having trouble showing the material-ui icon on my navigation menu

Using Javascript or Typescript constants along with WebPack being invoked twice

Node.js and Express: troubleshooting slow page loading issues

Querying for a specific element within an array of MongoDB objects using PyMongo

What would be a colloquial method to retrieve the ultimate result from the iterator function?

Unraveling the mysteries of the spread operator in Javascript

Can you explain the role of server-side programming in web development?

Reorganizing Angular 2 modules into separate projects

Can an input element be used to showcase a chosen image on the screen?

Expanding the Angular UI bootstrap modal to fullscreen

What is the alternative to using document.getElementById?

The JSON parser is struggling to process a string that consists of an array of objects

Creating initial state in Redux Toolkit with data fetched using Apollo's useQuery

Introducing a fresh counter variable inside a for loop

Creating a complex user interface in Angular using multiple nested views with the help of Angular

What is the proper way to use special characters like "<>" in a parameter when sending a request to the server using $.ajax?

Looking to improve MongoDB query performance

When will the javascript file fire if it has this implementation?

Retrieve a specific line of code from a snippet of JavaScript

What specific blur algorithm is utilized by the Flash platform within their blur filter implementation?