Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

json-html

Provide EDN/JSON and get a DOM node with a human representation of the data

Subscribe to updates I use json-html


Statistics on json-html

Number of watchers on Github 114
Number of open issues 0
Average time to close an issue 6 days
Main language Clojure
Average time to merge a PR about 5 hours
Open pull requests 0+
Closed pull requests 0+
Last commit about 2 years ago
Repo Created over 5 years ago
Repo Last Updated over 1 year ago
Size 50 KB
Organization / Authoryogthos
Contributors5
Page Updated
Do you use json-html? Leave a review!
View json-html activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating json-html for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

json-html

Generates a DOM node with a human representation of the JSON/EDN encoded data. Based on the json.human.js library.

Installation

The library provides support for Clojure/Script.

Leiningen

Clojars Project

Usage

(use 'json-html.core)

(edn->html {:foo [1 2 3] :bar "baz"})
bar baz
foo
0 1
1 2
2 3
(json->html "{\"foo\": [1, 2, 3], \"bar\": \"baz\"}")
bar baz
foo
0 1
1 2
2 3

The ClojureScript version has additional functions called edn->hiccup and json->hiccup, these can be used to generate Hiccup forms for use with other libraries such as Reagent.

A default CSS is provided in resources/json.human.css and can be included as follows:

(ns foo
  (:use json-html.core hiccup.page))

(spit "formatted.html"
     (html5
      [:head [:style (-> "json.human.css" clojure.java.io/resource slurp)]]
      (edn->html [:foo "bar" :baz [1 2 3]])))

Custom data types and render functions

To render data types that are not covered but the library (i.e. cljs.core/UUID) or redefine how already covered data types are rendered, extend the json-html.core/IRenderHTML protocol for your type. For example, to render UUIDs in the same way you would render its backing string, add this snippet in your code:

(extend-protocol json-html.core/Render
  cljs.core/UUID
  (render [u]
    [:span.jh-type-string (str u)]))

Example:

Input JSON:

{
  "name": "json.human",
  "description": "Convert\n JSON to human readable\r HTML",
  "author": "Mariano Guerra <mariano@marianoguerra.org>",
  "tags": ["DOM", "HTML", "JSON", "Pretty Print"],
  "version": "0.1.0",
  "main": "json.human.js",
  "license" : "MIT",
  "dependencies": {
      "crel": "1.0.0"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/marianoguerra/json.human.js.git"
  },
  "bugs": {
    "url": "https://github.com/yogthos/json-html/issues"
  },
  "contributors": [],
  "config": {
    "what?": "this object is just to show some extra stuff",
    "how?": ["add json.human.js", "add json.human.css", "???", "profit!"],
    "customization?": ["customize the css prefix", "change the css file"],
    "integer": 42,
    "float": 12.3,
    "bool": true,
    "emptyString": "",
    "emptyArray": [],
    "emptyObject": {},
    "htmlEntities": "   <- trailing <em>   & </em> and some html   "
  }
}

Output HTML

author Mariano Guerra <mariano@marianoguerra.org>
bugs
url http://github.com/marianoguerra/json.human.js/issues
config
bool true
customization?
0 customize the css prefix
1 change the css file
emptyArray
emptyObject
emptyString
float 12.3
how?
0 add json.human.js
1 add json.human.css
2 ???
3 profit!
htmlEntities <- trailing <em> & </em> and some html
integer 42
what? this object is just to show some extra stuff
contributors
dependencies
crel 1.0.0
description Convert JSON to human readable HTML
license MIT
main json.human.js
name json.human
repository
type git
url git://github.com/marianoguerra/json.human.js.git
tags
0 DOM
1 HTML
2 JSON
3 Pretty Print
version 0.1.0

License

MIT

json-html open issues Ask a question     (View All Issues)
  • about 3 years Maybe bug in cljs/sort-map?
  • about 3 years Cannot display UUID's?
json-html questions on Stackoverflow (View All Questions)
  • JSon HTML Table
  • Yet an other JSON -> HTML table thread
  • How to parse JSON HTML value into Android application?
  • Axlsx Rails. Generate .xlsx file and respond filename as json/html
  • Request AJAX (JSON+HTML) Spring-MVC
  • JSON ,HTML, MVC5,<execute></execute>
  • Directive Not taking JSON HTML value string
  • JSON HTML OUTPUT
  • Play 2.3: RESTful API, Invalid Json Html
  • problems with accents (jsp - json - html)
  • NSPredicate with NSDictionary, NSArray, JSON & HTML data
  • C# Deserialize JSON html string
  • For a single page application including data, is it better to have data in json,html or xml?
  • Django cache 2 different versions of a url (JSON & HTML)
  • Parse json & html data from ajax response
  • Unable to show Json html content data in textview in android
  • Styling Json html data with css
  • src stripped from json html data when using angular.js and angular-sanitize.js
  • how can i access remote server json/html data in my phonegap project?
  • JSON <html> Error
  • JSON html string is not being converted to html by innerhtml
  • HTML(input)->php->mysql->php->json->HTML render
  • JSON HTML table using jquery
  • JSON html parse
  • Frequent Graph API errors with non-JSON HTML responses: Sorry, something went wrong
  • user generated html storage in database: json, html, xml, or other solution?
  • basic Javascript jquery json Html
  • compile json html-string live with handlebars
  • How to reference array JSON/HTML data types on JQUERY SUCCESS handler
  • Find id element inside JSON html content using jQuery
json-html list of languages used
Other projects in Clojure