Our pure JavaScript Scheduler component


Post by Landpoint »

Hi,
I am working on a way to pre-populate the arrays of stores listed in my scheduler.

When the scheduler goes to render the items, I get "Uncaught TypeError: cannot read property 'name' of undefined."

In my code, I pull down a list of events from my server which contain event data, as well as a list of employees on that event and jobs that event is for.
Here you can see the promise handler after my ajax code comes back:
 .then(
                            (em) => {
                                for (let item of em) {
                                    let emps = [];
                                        emps.push({ id: 640, name: 'Some Name', image: "https://landpoint.bamboohr.com/employees/photos/?h=c64fff6051590ed16c1d00cb74257765"});                                                                                
                                                      
                                    let jobs = [];
                                           jobs.push({ id: 640, name: 'Some Name', image: "https://landpoint.bamboohr.com/employees/photos/?h=c64fff6051590ed16c1d00cb74257765"});                                                                                                                           

                                    this.events.push({ id: item.PKID, resourceId: item.FK, name: item.Event_Name, startDate: item.Start_Date, endDate: item.End_Date, equipment: jobs, employee: emps });
                                }
                                this.schedule.events = this.events;
                                this.schedule.trigger('load', { data: this.events });
                            }

                        )
I also have my eventBodyTemplate code setup as such:
                eventBodyTemplate: data => `
                <div class="b-sch-event-header">${data.date} - ${data.name}</div>
                <ul class="b-sch-event-footer">
                    ${(data.equipment || []).map((item) => `<li title="${item.name}" class="${item.iconCls}">${item.name}</li>`).join('')}
                </ul>
                <ul class="b-sch-event-footer" style ="list-style-type: none;">
                    ${(data.employee || []).map((item) => `<li title="${item.name}"> <img height="24px" src=${item.image} class="img-circle" alt=""></li>`).join('')}
                </ul>
                `
If I remove the eventBodyTemplate and leave it blank, the page renders fully, so for some reason, the 'item' being rendered is 'undefined' even though it is an object.

Post by pmiklashevich »

Please add a breakpoint to the template and try to debug your input data

Pavlo Miklashevych
Sr. Frontend Developer


Post by Landpoint »

Yeah, it comes up as undefined.

Post by mats »

Try debugging your incoming data. Set a breakpoint (or put some invalid code inside a code block of your string template and you'll learn what's going on.

Post by Landpoint »

Let me put some more background to it.
I am basing my code off of your drag onto event sample.
When I drag an item onto the event, the renderer works great as expected.
However, I am trying to pre-load the items (so they do not have to be dragged) onto the event via code, So as you saw in my initial post, the code I use to create the event with will contain an array of items instead of an empty '[]'.

Do I need to do anything else to initialize an event with items on it (like your equipment sample)

Post by Landpoint »

mats wrote: Mon Feb 18, 2019 10:26 pm Try debugging your incoming data. Set a breakpoint (or put some invalid code inside a code block of your string template and you'll learn what's going on.
Yes, I have done this.
The array data I am pushing into the schedule and events is there.
Like, if I console.log the entire schedule, I can navigate down to the event store and then to the employee and equipment arrays, my data is there in them....its the render call that is saying they are blank

Post by mats »

Yes, this is why you need to make it break in the *render* part to see what data is being fed to it and work your way back to the place where wrong data is passed.

Post by Landpoint »

Good Morning,

I recorded a debugging session for you and posted it here on my Youtube:
https://youtu.be/FtEO4XwEkCk

Inside the generateTplData function at one point the employee array data is valid, and then just a line or two below it, the elements become undefines.

I hope this helps
Attachments
WithData.png
WithData.png (175.02 KiB) Viewed 2109 times

Post by pmiklashevich »

So, you debug a minified version, make a recording and want us to debug your video now. Is that correct?

That's minified version on your video, which is very hard to debug. Please always use full version of code for debugging purposes!

I don't see a breakpoint on the video. You show a state when the error has already happened. To be able to see what happens with your data you need to put a break point before it gets corrupted. Then add `eventRecord.employee[0]` to the watcher on the right side of the dev tool, so you can see when the value of employee items gets changed to undefined. And then run your code step-by-step until you see your items are undefined. So you 100% sure what happens to your data.

On your video you compare `eventRecord` and `value`. Value is a result of the `eventRenderer` function call. So they are not the same. Please step into the eventRenderer call and investigate what is going on there.

I'm afraid we can't support debugging by video. You always should provide a valid testcase. Please try to reproduce the issue with one of our samples. Otherwise it's impossible to debug that thing for you.

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by Landpoint »

I sent what I can because I cannot get the debugger to attach in a meaningful way.
This is a webpack build.js file and the payload is massive. It takes over 15 minutes to get the debug symbols to even load, and when they do my breakpoints are not hitting.

Post Reply