Working with payloads inside javascript

[Lenny_Convis]

Greetings,

I am working on a custom experience page where I am using Tabulator to build a table view. I have altered my Workflow to include the data I would like to use within the Tabulator table, it is showing via the debugger under “working.roomdevices”

I have built a component with holds the required javascript to build the table and I am calling it out in the HTML as follows…

{{component ‘tabulator-room-devices’ @root.pageData.devices.working.roomdevices}}

Inside my javascript file, I am tring to reference the data as followed, but cannot get it working…

var tableData = '{{pageData.working.roomdevices}}';   
var table = new Tabulator("#table-roomdevices", {
    data:tableData,
        columns:[                     
            {title:"Device", field:'{{name}}', visible:true, hozAlign:"center", headerSort:false}, 
        ],      
});

The table builds, but no data populates, any ideas where I am failing here?

[Dylan_Schuster]

@Lenny_Convis I’m not familiar with Tabulator or your application, but I would guess that the data being passed into the plugin expects your tableData variable to be an array of objects, and you are declaring it here as a string. Therefore, change your declaration to:

var tableData = {{jsonEncode pageData.working.roomdevices}};

The jsonEncode string template will stringify the array from your payload, and by not wrapping it in quotes, it will get rendered into the page context in a form like [{"key": "value"}].

If that doesn’t solve your issue, here are some steps I would try to debug it …

In your Losant application, navigate to the Experience Page that is rendering this component. Then, keeping an eye on the page’s Render Log, in a separate browser tab, reload the URL that is rendering your page. This will display the rendered output of the page, along with the context object used to render it. Within the render context, make sure the value at pageData.devices.working.roomdevices is in the expected format. (Again, assuming here it should be an array of objects.)

If it is, then I would add the following snippet to the Experience Component you created:

<pre>{{jsonEncode . 2}}</pre>

This will print out the full context object being passed into the component, and with this, you can ensure the context is making its way from the page to the component correctly.

Finally, I would open the browser’s console and look for any errors being printed out, as those would likely prevent your table plugin from instantiating correctly.

Let me know if this helps.

[Lenny_Convis]

Dylan thank you again for your response…

It seems as though placing the new var tableData string into place fails if I leave the quotes out. Is there a different way to enclose the mustache brackets in javascript?

[Dylan_Schuster]

It seems as though placing the new var tableData string into place fails if I leave the quotes out.

Can you elaborate on this? Are there errors in your browser console you can share?

Also, if there is no sensitive data within the output, can you paste the output of the Render Log at the line where you are declaring your variable? var tableData = ...

[Lenny_Convis]

Dylan, Here is the out put from the rendering log. It is placing the data in beautifully…

As far as the failing is concerned when removing the single or double quotes, it basically causes the table to disappear from the page

[Dylan_Schuster]

OK, so far so good.

Now, beneath your var tableData = ..., can you add the following line:

console.log('tableData', tableData);

Then, open your browser’s Inspector and console, and you should see a line like “tableData” followed by whatever that value is being set to within your component. Again, assuming there is no sensitive data displayed, can you screenshot that and paste it here?

[Lenny_Convis]

@Dylan_Schuster

console.log('tableData', tableData);

Added the console.log, but it is still not accepting the tableData

[Dylan_Schuster]

Ah, so by the looks of it, you have a bug higher up in your JavaScript that is causing everything beneath it to fail.

$ is not defined usually means you are trying to use jQuery before it has loaded.

Here is a great Stack Overflow question on this exact topic, including why it’s happening and how to resolve it.

[Lenny_Convis]

Alright, the JQuery issue is resolved…still not furthur ahead with the table

[Dylan_Schuster]

I went ahead and looked in your account and I think I see what’s going on. Try this …

Assuming you are instantiating your component directly from a page - and not as a child of another component - do it like so …

{{component 'tabulator-room-devices' pageData.roomdevices}}

And in the component, the context passed in is available as the variable this.

var tableData = {{jsonEncode this}};

If that works, I’ll do a post-mortem with you to describe where things went wrong so we can avoid this mistake in the future.

[Dylan_Schuster]

Also, make sure the quotes in the component declaration are single-quote characters and not apostrophes … Looks like our forums software is converting them on me.

[Lenny_Convis]

@Dylan_Schuster

{{component 'tabulator-room-devices' pageData.roomdevices}}

Well Dylan, i hate to even say this but still not working

[Lenny_Convis]

Dylan,

You are a Rockstar my friend!!! That did the trick!!!

Thank you so much for your persistence in resolving this puzzle!

[Dylan_Schuster]

Ah, great to hear. When you said my suggestion still was not working, what problem were you running into there? Did I give you false direction in how to fix this?

As for what was wrong originally …

• Your workflow was passing your working object in as pageData, meaning the value of working was being set as pageData`.
• However, you were referencing pageData.working.roomdevices as your variable, when it really should have been pageData.roomDevices. The working property should have been out of the picture at this point given how you were defining your pageData object. Something I do when building experience workflows is to create a payload object called pageData, build out my context within there and then set the value of the object I pass into the page in the Endpoint Reply Node as pageData. This eliminates that confusion point you hit.
• The context you pass to a component - the “pageData.roomdevices” in {{component 'tabulator-room-devices pageData.roomdevices}} - is then referenced in the component as this (so then, in your case, you’d write var tableData = {{jsonEncode this}}). You do have the option of not defining this argument at all, in which case the entire page rendering context is passed to the component. If you did that, within your component, I believe the line would become var tableData = {{jsonEncode pageData.roomdevices}};.

Let me know if you run into any other issues, and welcome to the Losant Forums!

[Lenny_Convis]

Great explination, much appreciated! As for the other issue, I was relocating my jQuery declaration and forgot to remove from the layout page (which I have removed altogether now). Also, I was calling for the value using {{this.name}} rather than just name!

I am rocking now! Onto the next hurdle!

Thanks again for everything! I can sleep a bit better tonight knowing this is running!