How to debug this error?

TypeError: t.on is not a function
    at s.bindCollection (noodl.viewer.js:2)
    at set (noodl.viewer.js:2)
    at s.o.setInputValue (noodl.viewer.js:2)
    at s.o.update (noodl.viewer.js:2)
    at a.updateDirtyNodes (noodl.viewer.js:2)
    at a.update (noodl.viewer.js:2)
    at m._doUpdate (noodl.viewer.js:2)

How do i go about identifying the cause of this error?

Thanks for reporting. Would it be possible to provide some more context on the error? Specifically:

Are you using any custom javascript?

Does the error also show up as a warning on any of your nodes in your workspace?

Hi Mikael.

I’m essentially getting some (HTML) data via REST and into a Function node.
In the function node, a JSON is being created and ultimately passed on to the final ‘Custom HTML’ node, to be displayed.

Now, if i use static and simple HTML data in the Function node, the data gets displayed correctly. But, when getting and setting it dynamically, the display is blank, along with the above mentioned error in the console.

For ref., this is the code of the Function node:

Functional Code
data = Inputs.Data;
console.log(data);
try{
    output = [
        {
            "Title":"Section A",
            "Questions":[
                {
                    "Content":"<p>Hello. This is test paragraph no. 1!</p>",
                    "isChecked":true
                },
                {
                    "Content":"<p>Hello. This is test paragraph no. 2!</p>"
                },
                {
                    "Content":"<p>Hello. This is test paragraph no. 3!</p>"
                }
            ]
        },
        {
            "Title":"Section B",
            "Questions":[
                {
                    "Content":"<p>Hello. This is test paragraph no. 4!</p>",
                    "isChecked":true
                },
                {
                    "Content":"<p>Hello. This is test paragraph no. 5!</p>"
                },
                {
                    "Content":"<p>Hello. This is test paragraph no. 6!</p>"
                }
            ]
        }
    ];
} catch(err){
    console.error(err);
    output=[];
}
console.log(output);
Outputs.Items = output;

Dysfunctional code:
data = Inputs.Data;
console.log(data);
try{
    output = [
        {
            "Title":"Section A",
            "Questions":[
                {
                    "Content":"<p>Hello. This is test paragraph no. 1!</p>",
                    "isChecked":true
                },
                {
                    "Content":"<p>Hello. This is test paragraph no. 2!</p>"
                },
                {
                    "Content":"<p>Hello. This is test paragraph no. 3!</p>"
                }
            ]
        },
        {
            "Title":"Section B",
            "Questions":[
                {
                    "Content":'"'+`<p><span style="font-size: 13pt;"> <span class="fontstyle0">a) </span><span class="fontstyle0">Stem&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="fontstyle0">1) </span><span class="fontstyle0">fix plants<br /></span><span class="fontstyle0">b) </span><span class="fontstyle0">Seed&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="fontstyle0">2) </span><span class="fontstyle0">contains seeds<br /></span><span class="fontstyle0">c) </span><span class="fontstyle0">Roots&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="fontstyle0">3) </span><span class="fontstyle0">carries water<br /></span><span class="fontstyle0">d) </span><span class="fontstyle0">Flower&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span><span class="fontstyle0">4) </span><span class="fontstyle0">baby plant<br /></span><span class="fontstyle0">e) </span><span class="fontstyle0">Fruit&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span><span class="fontstyle0">5) </span><span class="fontstyle0">colourful</span> </span></p>`.replace(/"/,'\"')+'"',
                    "isChecked":true
                },
                {
                    "Content":'"'+data.replace(/"/,'\"')+'"'
                },
                {
                    "Content":"<p>Hello. This is test paragraph no. 6!</p>"
                }
            ]
        }
    ];
} catch(err){
    console.error(err);
    output=[];
}
console.log(output);
Outputs.Items = JSON.stringify(output);

There isn't any other warning/error shown in any of the nodes.

I suspect the issue is with the parsing of JSON data within the Function node which is consequently causing issues within the Custom HTML node, but there could be other things too.

The error suggests that it is coming from an Array or Repeater node that is getting as inputs to its Items something that isn’t a Noodl Array. But I don’t see how your changes between the function and dysfunctional code would cause that.

Could it be that something goes wrong in the JSON.stringify?

What are you connecting the Output.Items to?

Correction:

The functional code isn’t working either, in the Function node.
I’m getting the display only when sending the (HTML) data (via the Repeater) from a Static Array, the code for which is:

[
    {
        "Title":"Section A",
        "Questions":[
            {
                "Content":"<p>Hello. This is test paragraph no. 1!</p>",
                "isChecked":true
            },
            {
                "Content":"<p>Hello. This is test paragraph no. 2!</p>"
            },
            {
                "Content":"<p>Hello. This is test paragraph no. 3!</p>"
            }
        ]
    },
    {
        "Title":"Section B",
        "Questions":[
            {
                "Content":"<p>Hello. \"This\" is test paragraph no. 4!</p>",
                "isChecked":true
            },
            {
                "Content":"<p>Hello. This is test paragraph no. 5!</p>"
            },
            {
                "Content":"<p>Hello. This is test paragraph no. 6!</p>"
            }
        ]
    }
]

Ok then I know what the problem is. The Items input of the Repeater node needs a Noodl.Array as input. (Noodl Documentation)

So something like:

var myNoodlArray = Noodl.Array.get() // Get me a new array
myNoodlArray.set( myJSArray )

Output.Items = myNoodlArray

… should work.

Indeed, this works. Thanks!

I still get a bit lost with the Noodl.Object and Noodl.Array conversions and related requirements.

That is very understandable! We are working on providing better error messages and for nodes to support js arrays directly.

More improvements to come soon! Thanks for understanding :slight_smile:

1 Like

Also, does it mean that the Static Array/Array nodes output Noodl.Array by default?