TypeError: json2html is not a function

Question

Trying to use json2html to emit a table. Getting the error TypeError: json2html is not a function

Page header has:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/lib/jqueryui/jquery-ui.css" />
    <link rel="stylesheet" href="/lib/font-awesome/css/fontawesome.css" />

    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/jqueryui/jquery-ui.js"></script>
    <script src="/lib/font-awesome/js/fontawesome.js"></script>
    <script src="/lib/canvasjs/canvasjs.js"></script>
    <script src="/lib/json2html/json2html.js"></script>
    <script src="/lib/jquery.json2html/jquery.json2html.js"></script>

    <link rel="stylesheet" href="/css/site.css" />
</head>

Path to files /lib/json2html/json2html.js and /lib/jquery.json2html/jquery.json2html.js confirmed using ctrl-shift-i

The method I'm hoping to execute initially is:

$("#tableContainer").html(json2html(data, transform));

TypeError: json2html is not a function
at Object.layer2CallbackHandler [as callback] (https://localhost:44388/JsonChartJs:306:35)
at Object.success (https://localhost:44388/JsonChartJs:220:41)
at fire (c:\users\lukem\source\ctrack.dashboard\ctrack.dashboard\wwwroot\lib\jquery\dist\jquery.js:3268:32)
at Object.fireWith [as resolveWith] (c:\users\lukem\source\ctrack.dashboard\ctrack.dashboard\wwwroot\lib\jquery\dist\jquery.js:3398:8)
at done (c:\users\lukem\source\ctrack.dashboard\ctrack.dashboard\wwwroot\lib\jquery\dist\jquery.js:9305:15)
at XMLHttpRequest.<anonymous> (c:\users\lukem\source\ctrack.dashboard\ctrack.dashboard\wwwroot\lib\jquery\dist\jquery.js:9548:10)

I've also tried this based on the jquery example at the json2html page

$("#tableContainer").json2html(data, transform);

TypeError: $(...).json2html is not a function
at Object.layer2CallbackHandler [as callback] (https://localhost:44388/JsonChartJs:306:30)
at Object.success (https://localhost:44388/JsonChartJs:220:41)
at fire (c:\users\lukem\source\ctrack.dashboard\ctrack.dashboard\wwwroot\lib\jquery\dist\jquery.js:3268:32)
at Object.fireWith [as resolveWith] (c:\users\lukem\source\ctrack.dashboard\ctrack.dashboard\wwwroot\lib\jquery\dist\jquery.js:3398:8)
at done (c:\users\lukem\source\ctrack.dashboard\ctrack.dashboard\wwwroot\lib\jquery\dist\jquery.js:9305:15)
at XMLHttpRequest.<anonymous> (c:\users\lukem\source\ctrack.dashboard\ctrack.dashboard\wwwroot\lib\jquery\dist\jquery.js:9548:10)

It seems clear I'm loading these the wrong way. What is the right way?

What exactly do you mean by _"Path to files ... confirmed using ctrl-shift-i"_? Have you confirmed that they are actually JavaScript files with the correct contents? Try opening them in your browser, eg http://localhost:44388/lib/json2html/json2html.js — Phil, Sep 02 '19 at 02:01
It means I have opened the inspection tools by pressing ctrl-shift-i in my browser (chrome). When I look at the tab elements, expanding html, then head, the links to external files are clickable. Clicking on them loads the file and allows me to confirm it is the correct file. — Hecatonchires, Sep 02 '19 at 02:13
Ok, great. That's pretty much what I was asking. Where in your HTML document is the `$("#tableContainer").html(json2html(data, transform))` code? Is it in a `.js` file or within a `` block? What location within the document is it included? — Phil, Sep 02 '19 at 02:14
Its in a script block, inside a callback handler. Havent moved code to a separate file yet. — Hecatonchires, Sep 02 '19 at 02:16
actually, you can see it at www.ctrackonline.com.au/DashboardTest. You'll need to click down twice on charts. — Hecatonchires, Sep 02 '19 at 02:18
Seems `json2html` is an object. Looks like it's got a `transform` function. Perhaps that's what you're after. I'd start by reading the documentation ~ https://json2html.com/examples/. Doesn't explain why the jQuery version doesn't work though — Phil, Sep 02 '19 at 02:24

score 0 · Answer 1 · answered Oct 17 '19 at 21:04

If you want to use the jquery plugin for json2html you're going to need to include it as well in your header

<script src="/lib/json2html/json2html.js"></script>
<script src="/lib/json2html/jquery.json2html.js"></script>

Which should enable you to use the following

$("#tableContainer").json2html(data, transform);

Otherwise you can use the native call for json2html like so

$("#tableContainer").html(json2html.transform(data, transform));

as json2html is an object NOT a function

TypeError: json2html is not a function

1 Answers1