Passing Azure Databricks Variable to Html Script

Question

I'm trying to pass a variable from a previous databricks command into this one, but I keep getting a Key Error. Here is the code below...

htmlCode = """ 
  <div id="61534155"></div>

  <script type="module">
    import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
    import define from "https://api.observablehq.com/d/7c6f1f9fe48d9231.js?v=3";
    const main = new Runtime().module(define, Inspector.into("#61534155"));
    main.redefine("file", fetch(sampleJson).then(response => response.json()));
   </script> 
   """
displayHTML(htmlCode.format(sampleJson = jsonFile))

jsonFile is the variable from a previous command that I am trying to pass into this HTML code. I keep getting the error "KeyError: 'Runtime, Inspector'" Does anyone have any ideas on resolving it?

Answer 1

To import import json file in html in javascript you can refer below code.

// pure javascript
let object;
let httpRequest = new XMLHttpRequest(); // asynchronous request
httpRequest.open("GET", "local/path/file.json", true);
httpRequest.send();
httpRequest.addEventListener("readystatechange", function() {
    if (this.readyState === this.DONE) {
        // when the request has completed
        object = JSON.parse(this.response);
    }
});

You can also refer this article by Chuck Connell