Two calls to the API endpoint

[Mircea]

Hi,

I tried to implement an Angular project with the Syncfusion Schedule component v18.1.55. 

I was using my previous project:

Sample: https://www.syncfusion.com/downloads/support/directtrac/269265/ze/sample_modified-1291218945.zip 

but now I am using Angular Universal 9 with MongoDB 4.2.1 .

Everything is working but I noticed there are all the time two calls to the API endpoint from the Angular Schedule component which is not efficient at all.

There are 2 MongoDB collections: 

1. ScheduleData which contains the appointments data.

2. Rooms which contains the rooms ( I attached the collection rooms.zip to this thread ).

I attached the archive with my Angular project(angular9sample-master.zip).

Thank you very much for your help.

Regards,

Mircea

Attachment: rooms_736c1a6a.zip

[Mircea]

Hi,

I forgot to attach the project archive.

Regards,

Mircea

Attachment: angular9samplemaster_d4785f2f.zip

[Hareesh Balasubramanian]

Hi Mircea, 

 

Greetings from Syncfusion Support…! 

   

We can bind the data to Scheduler from MongoDB  and we have prepared a sample with Angular version as 9  for your reference which can be downloaded from the following location.  

  

Sample: https://www.syncfusion.com/downloads/support/forum/155045/ze/sample1171017249  

   

In the above sample, we have added CRUD actions code snippet in server.js. 

 

var MongoClient = require('mongodb').MongoClient; 

const express = require('express'); 

const bodyParser = require('body-parser'); 

const app = express(); 

var url = "mongodb://localhost:27017/"; 

app.use(bodyParser.json()); 

app.use(bodyParser.urlencoded({ extended: false })) 

app.listen(5000, function () { 

    console.log('listening on 5000') 

}) 

app.use(express.static(__dirname)) 

 

MongoClient.connect(url, function (err, db) { 

    if (err) throw err; 

    var dbo = db.db("mydb"); 

    app.use(function (req, res, next) { 

        res.header("Access-Control-Allow-Origin", "*"); 

        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 

        next(); 

    }); 

    app.post("/GetData", (req, res) => { 

        dbo.collection('ScheduleData').find({}).toArray((err, cus) => { 

            res.send(cus); 

        }); 

    }); 

    app.post("/BatchData", (req, res) => { 

        console.log(req.body); 

        var eventData = []; 

        if (req.body.action == "insert" || (req.body.action == "batch" && req.body.added.length > 0)) { 

            (req.body.action == "insert") ? eventData.push(req.body.value) : eventData = req.body.added; 

            for (var i = 0; i < eventData.length; i++) { 

                var sdate = new Date(eventData[i].StartTime); 

                var edate = new Date(eventData[i].EndTime); 

                eventData[i].StartTime = sdate; 

                eventData[i].EndTime = edate; 

                dbo.collection('ScheduleData').insertOne(eventData[i]); 

            } 

        } 

        if (req.body.action == "update" || (req.body.action == "batch" && req.body.changed.length > 0)) { 

            (req.body.action == "update") ? eventData.push(req.body.value) : eventData = req.body.changed; 

            for (var i = 0; i < eventData.length; i++) { 

                delete eventData[i]._id; 

                var sdate = new Date(eventData[i].StartTime); 

                var edate = new Date(eventData[i].EndTime); 

                eventData[i].StartTime = sdate; 

                eventData[i].EndTime = edate; 

                dbo.collection('ScheduleData').updateOne({ "Id": eventData[i].Id }, { $set: eventData[i] }); 

            } 

        } 

        if (req.body.action == "remove" || (req.body.action == "batch" && req.body.deleted.length > 0)) { 

            (req.body.action == "remove") ? eventData.push({ Id: req.body.key }) : eventData = req.body.deleted; 

            for (var i = 0; i < eventData.length; i++) { 

                dbo.collection('ScheduleData').deleteOne({ "Id": eventData[i].Id }); 

            } 

        } 

        res.send(req.body); 

    }); 

}); 

  

Note: We have removed the local offset time before inserting and updating the events in the database collection to render the appointments without considering system UTC in the scheduler.  

   

In the below code we have given the GetData and BatchData url path to initial fetching and for performing CRUD actions using UrlAdaptor and assigned it to the scheduler datasource. 

 

    private dataManager: DataManager = new DataManager({  

    url: 'http://localhost:5000/GetData',  

    crudUrl: 'http://localhost:5000/BatchData',  

    adaptor: new UrlAdaptor,  

    crossDomain: true  

  });  

    ngOnInit(): void { 

    this.selectedDate = new Date(2018, 1, 14); 

    this.eventSettings = { dataSource: this.dataManager }; 

  } 

  

Steps to run the sample:  

1. Run MongoDB and create the collection named ‘ScheduleData’ in ‘mydb’ database.
2. Run the below comments.

npm install  

npm run server  

npm start  

   

Please try the above sample and let us know if you need further assistance.  

   

Regards,  

Hareesh 

[Mircea]

Hi Hareesh ,

I already followed your instructions to fetch data from a MongoDB database since the Angular 8 version. This is working for Angular 9, too.

What I am trying now is the Angular 9 Universal version which is a special Server-side rendering version of Angular. That means is using an server.ts file instead of the server.js file what is used by your sample.

Please follow these steps to install my application attached previously to my messages (angular9samplemaster_d4785f2f.zip):

Run MongoDB and create the collection named ‘ScheduleData’ in ‘mydb’ database.

Create the collection named ‘rooms’ in ‘mydb’ database.

Import data from my second attachment(rooms_736c1a6a.zip)

Run the below commands:

npm install  

npm run build:ssr && npm run serve:ssr

Open the browser at http://localhost:4000

At the command prompt where you start the Angular application with"npm run build:ssr && npm run serve:ssr"  you will see 2 outputs  "console.log('GetData')" and one  "console.log('getRooms')".

That means Angular application will fetch twice the data from the ‘ScheduleData’  collection (done by the Syncfusion Schedule component) and just once from the 'rooms' collection (done by a standard Angular component). 

To access 2 times a collection is not good at all.

Thank you very much for your help.

Regards,

Mircea

[Hareesh Balasubramanian]

Hi Mircea, 

Thanks for the update. 

We have validated your shared query “To access 2 times a collection is not good at all” at our end. By default in our Scheduler, the post request will raise twice, the initial request is to verify the connection establishing or not and the final request will call the respective service controller based on the request type. For each POST request, the communication establishing request has been verifying the connection before the request sent to the controller. 

Kindly get back to us for further assistance with more details and we are waiting to serve you better. 

Regards, 

Hareesh 

[Mircea]

Hi Hareesh,

Thank you for your answer.

To make it clear: first call for the POST request is made just to verify the connection and is not transferring any data from the database? And jus the second call will transfer the records from the database?

Thank you very much for your help.

Regards,

Mircea

[Vengatesh Maniraj]

Hi Mircea, 

Thanks for the update. 

Yes, you are correct. The first call is to verify the connection and the second call is to transfer the records. 

Regards, 

Vengatesh  

[Mircea]

Hi Vengatesh,

Now it's clear.

Thank you very much for your help.

Regards,

Mircea

[Vengatesh Maniraj]

Hi Mircea, 

You are most welcome. 

Please get in touch with us if you would require any further assistance. 

Regards, 

Vengatesh