Render JSON as a collapsible field in jupyter notebooks - Updated - Also includes instructions for interleaving with print statements

render_json_jupyter_collapsible.py

## Add this to the first block in your note book
import uuid
from IPython.core.display import display, HTML

import json

class RenderJSON(object):
    def __init__(self, json_data):
        if isinstance(json_data, dict):
            self.json_str = json.dumps(json_data)
        else:
            self.json_str = json_data
        self.uuid = str(uuid.uuid4())
        # This line is missed out in most of the versions of this script across the web, it is essential for this to work interleaved with print statements
        self._ipython_display_()
        
    def _ipython_display_(self):
        display(HTML('<div id="{}" style="height: auto; width:100%;"></div>'.format(self.uuid)))
        display(HTML("""<script>
        require(["https://rawgit.com/caldwell/renderjson/master/renderjson.js"], function() {
          renderjson.set_show_to_level(1)
          document.getElementById('%s').appendChild(renderjson(%s))
        });</script>
        """ % (self.uuid, self.json_str)))

# Since this is copy-pasted wrongly(mostly) at a lot of places across the web, i'm putting the fixed, updated version here, mainly for self-reference


## To use this function, call this, this now works even when you have a print statement before or after the RenderJSON call
RenderJSON(dict_to_render)

Thanks for script!
I have problem that it reders me two instances of JSON in Jupyter, look like that:

Any thoughts why?

Thanks for script!
I have problem that it reders me two instances of JSON in Jupyter, look like that:

Any thoughts why?

same problem . hahahaha, i don't know why too

Comment out the line self._ipython_display_() and you'll get one copy

Came here from. I had some errors with datatime objects in my json, "TypeError: Object of type datetime is not JSON serializable". This was my fix for that problem thanks to.

`import uuid
from IPython.core.display import display, HTML, JSON
import json
import datetime
class DateTimeEncoder(json.JSONEncoder):
def default(self, z):
if isinstance(z, datetime.datetime):
return (str(z))
else:
return super().default(z)

class RenderJSON(object):
def init(self, json_data):
if isinstance(json_data, dict):
self.json_str = json.dumps(json_data,cls=DateTimeEncoder)
else:
self.json_str = json_data
self.uuid = str(uuid.uuid4())
# This line is missed out in most of the versions of this script across the web, it is essential for this to work interleaved with print statements
self.ipython_display()

def _ipython_display_(self):
    display(HTML('<div id="{}" style="height: auto; width:100%;"></div>'.format(self.uuid)))
    display(HTML("""<script>
    require(["https://rawgit.com/caldwell/renderjson/master/renderjson.js"], function() {
      renderjson.set_show_to_level(1)
      document.getElementById('%s').appendChild(renderjson(%s))
    });</script>
    """ % (self.uuid, self.json_str)))

RenderJSON(accounts[0])`

having the same problem, i am solving

Came here from. I had some errors with datatime objects in my json, "TypeError: Object of type datetime is not JSON serializable". This was my fix for that problem thanks to.

`import uuid from IPython.core.display import display, HTML, JSON import json import datetime class DateTimeEncoder(json.JSONEncoder): def default(self, z): if isinstance(z, datetime.datetime): return (str(z)) else: return super().default(z)

class RenderJSON(object): def init(self, json_data): if isinstance(json_data, dict): self.json_str = json.dumps(json_data,cls=DateTimeEncoder) else: self.json_str = json_data self.uuid = str(uuid.uuid4()) # This line is missed out in most of the versions of this script across the web, it is essential for this to work interleaved with print statements self.ipython_display()

def _ipython_display_(self):
    display(HTML('<div id="{}" style="height: auto; width:100%;"></div>'.format(self.uuid)))
    display(HTML("""<script>
    require(["https://rawgit.com/caldwell/renderjson/master/renderjson.js"], function() {
      renderjson.set_show_to_level(1)
      document.getElementById('%s').appendChild(renderjson(%s))
    });</script>
    """ % (self.uuid, self.json_str)))

RenderJSON(accounts[0])`