Organizing items within a group

Question

Organizing items within a group

As I embarked on my journey of creating my first Meteor app, I encountered a challenge that left me feeling a bit lost. I have a collection of Entries and I want to categorize them by date, not simply sort them. Each entry comes with a date and I envision building a timeline-like structure. Here's an example of what one of the entries looks like:

{
  "_id": "xHmfEc5gMmGzDZgD2",
  "title": "something",
  "labels": [
    "pv4LnWNheyYRJqG7D"
  ],
  "images": [
    "zitE3FwmesHsNCxGG",
    "kYQTJYApDxPr4sMdW",
    "4enopyawfqBXRDvuh"
  ],
  "author": "TMviRL8otm3ZsddSt",
  "createdAt": "2016-01-31T21:05:55.401Z",
  "date": "2016-01-31T21:05:55.401Z",
  "description": "description"
}

Ultimately, I aim to create a timeline where entries are grouped by days. Here's a glimpse of what the timeline could look like, with entries categorized by day:

Day - 11.02.2016

entry - xHmfEc5gMmGzDZgD2

entry - ZhmfEc5gMmGzDZg8z

entry - uafEc5gMmGzDZgD25

Day - 12.02.2016

entry - xHmfEc5gMmGzDZgD2

entry - ZhmfEc5gMmGzDZg8z

Day - 17.02.2016

entry - xHmfEc5gMmGzDZgD2

entry - ZhmfEc5gMmGzDZg8z

entry - xHmfEc5gMmGzDZgD2

entry - ZhmfEc5gMmGzDZg8z

Instead of creating a separate collection for a calendar, I would like to extract the days directly from the entries. Is there a way to accomplish this without making separate DB queries for each day?

I'm currently thinking of storing all the different dates from the entries in a separate collection and then having each day query the entries collection to fetch the relevant ones. However, I feel like this approach might not be efficient, as it would involve a DB query for each day...

javascript mongodb meteor

Answer 1

Answer №1

For solving this issue, consider utilizing the aggregation framework. However, since aggregate is not yet supported in meteor, you will need to install the aggregation framework package - it simply wraps up some Mongo methods for you.

Simply add meteorhacks:aggregate to your Meteor project and you will have proper aggregation support.

To achieve the desired result, use the following pipeline in the mongo shell:

var pipeline = [
    {
        "$project": {
            "yearMonthDay": { "$dateToString": { "format": "%Y-%m-%d", "date": "$date" } },         
        }
    },
    {
        "$group": {
            "_id": "$yearMonthDay",
            "entries": { "$push": "$_id" }
        }
    }
];

db.entry.aggregate(pipeline);

In Meteor, you can publish these results to the Entries collection on the client side:

Meteor.publish('getDayCategorisedEntries', function (opts) {

    var initializing = 1;

    function run(action) {

        // Define the aggregation pipeline ( aggregate(pipeline) )
        var pipeline = [
            {
                "$project": {
                    "yearMonthDay": { "$dateToString": { "format": "%Y-%m-%d", "date": "$date" } },         
                }
            },
            {
                "$group": {
                    "_id": "$yearMonthDay",
                    "entries": { "$push": "$_id" }
                }
            }
        ];

        Entries.aggregate(pipeline).forEach(function(e){
            this[action]('day-entries', e._id, e)
            this.ready()
        });
    };

    // Run the aggregation initially to add some data to your aggregation collection
    run('added');

    // Track any changes on the collection we are going to use for aggregation
    var handle = Entries.find({}).observeChanges({
        added(id) {
            if (initializing && initializing--) run('changed');
        },
        removed(id) {
            run('changed');
        },
        changed(id) {
            run('changed');
        },
        error(err) {
            throw new Meteor.Error('Uh oh! something went wrong!', err.message)
        }
    });

    // Stop observing the cursor when client unsubscribe.
    this.onStop(function () {
        handle.stop();
    });
});

The code above will observe changes and rerun the aggregation as needed.

Answer 2

For solving this issue, consider utilizing the aggregation framework. However, since aggregate is not yet supported in meteor, you will need to install the aggregation framework package - it simply wraps up some Mongo methods for you.

Simply add meteorhacks:aggregate to your Meteor project and you will have proper aggregation support.

To achieve the desired result, use the following pipeline in the mongo shell:

var pipeline = [
    {
        "$project": {
            "yearMonthDay": { "$dateToString": { "format": "%Y-%m-%d", "date": "$date" } },         
        }
    },
    {
        "$group": {
            "_id": "$yearMonthDay",
            "entries": { "$push": "$_id" }
        }
    }
];

db.entry.aggregate(pipeline);

In Meteor, you can publish these results to the Entries collection on the client side:

Meteor.publish('getDayCategorisedEntries', function (opts) {

    var initializing = 1;

    function run(action) {

        // Define the aggregation pipeline ( aggregate(pipeline) )
        var pipeline = [
            {
                "$project": {
                    "yearMonthDay": { "$dateToString": { "format": "%Y-%m-%d", "date": "$date" } },         
                }
            },
            {
                "$group": {
                    "_id": "$yearMonthDay",
                    "entries": { "$push": "$_id" }
                }
            }
        ];

        Entries.aggregate(pipeline).forEach(function(e){
            this[action]('day-entries', e._id, e)
            this.ready()
        });
    };

    // Run the aggregation initially to add some data to your aggregation collection
    run('added');

    // Track any changes on the collection we are going to use for aggregation
    var handle = Entries.find({}).observeChanges({
        added(id) {
            if (initializing && initializing--) run('changed');
        },
        removed(id) {
            run('changed');
        },
        changed(id) {
            run('changed');
        },
        error(err) {
            throw new Meteor.Error('Uh oh! something went wrong!', err.message)
        }
    });

    // Stop observing the cursor when client unsubscribe.
    this.onStop(function () {
        handle.stop();
    });
});

The code above will observe changes and rerun the aggregation as needed.

Organizing items within a group

Answer №1

Similar questions

Is there a way to automatically change the display of an element once the user has closed the menu?

Stop the default drag behavior on an input range element in VueJS

Understanding the Typescript Type for a JSON Schema Object

The Vue method is failing to properly send data to an array of objects

It appears that the jQuery this() function is not functioning as expected

extract the key identifier from the JSON reply

Organizing various elements into separate divs with just one ajax request

Ways to identify if the requested image is error-free (403 Forbidden)

What is the best way to adjust the width of an image?

Choose the initial unordered list within a specific division through Jquery

When you call setTimeout from a static function, it does not get executed

Struggling to keep the page refreshed and stay on the same page in React, however, the state refuses to update as anticipated

Wait for response after clicking the button in Vue before proceeding

An Unexpected Token Leads to a SyntaxError in Jest's CSS-Modules

Challenges faced with react-bootstrap-autosuggest

Utilizing AngularJS to invoke a particular function within a PHP script: A comprehensive guide

Is there a way to execute a jar file using JavaScript?

Using MongoDB C# driver may result in enum serialization as an integer when applying LINQ filtering

Updating the value of the variable using ng-submit

Trouble installing NPM packages from Artifactory on Windows 10