Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Any recommendations on how to embed JSON in an HTML page with the JSON formatted in a human readable style? For example, when you view XML in a browser, most browsers display the XML formatted (indented, proper line breaks, etc). I'd like the same end result for JSON.
Color syntax highlighting would be a bonus.
Thanks
You can use the JSON.stringify function with unformatted JSON. It outputs it in a formatted way.
JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)
This turns
{ "foo": "sample", "bar": "sample" }
into
{
"foo": "sample",
"bar": "sample"
}
Now the data is a readable format you can use the Google Code Prettify script as suggested by #A. Levy to colour code it.
It is worth adding that IE7 and older browsers do not support the JSON.stringify method.
If you are deliberately displaying it for the end user, wrap the JSON text in <PRE> and <CODE> tags, e.g.:
<html>
<body>
<pre>
<code>
[
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
},
{
color: "magenta",
value: "#f0f"
},
{
color: "yellow",
value: "#ff0"
},
{
color: "black",
value: "#000"
}
]
</code>
</pre>
</body>
</html>
Otherwise I would use JSON Viewer.
For the syntax highlighting, use code prettify. I believe this is what StackOverflow uses for its code highlighting.
Wrap your formatted JSON in code blocks and give them the "prettyprint" class.
Include prettify.js in your page.
Make sure your document's body tag calls prettyPrint() when it loads
You will have syntax highlighted JSON in the format you have laid out in your page. See here for an example. So if you had a code block like this:
<code class="prettyprint">
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
</code>
It would look like this:
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
This doesn't help with the indenting, but the other answers seem to be addressing that.
I think you meant something like this:
JSON Visualization
Don't know if you might use it, but you might ask the author.
something like this ??
pretty-json
https://github.com/warfares/pretty-json
live sample:
http://warfares.github.io/pretty-json/
Here's a light-weight solution, doing only what OP asked, including highlighting but nothing else: How can I pretty-print JSON using JavaScript?
Could use JSON2HTML to transform it to nicely formatted HTML list .. may be a little more powerful than you really need though
http://json2html.com
If you're just looking to do this from a debugging standpoint, you can use a Firefox plugin such as JSONovich to view the JSON content.
The new version of Firefox that is currently in beta is slated to natively support this (much like XML)
Here's a javasript tool that will convert JSON to XML and vice versa, which should enhance its readability. You could then create a style sheet to color it or do a complete transform to HTML.
http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html
Your best bet is going to be using your back-end language's tools for this. What language are you using? For Ruby, try json_printer.
SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what SyntaxHighlighter is capable of, have a look at the demo page.
First take the JSON string and make real objects out of it. Loop though all of the properties of the object, placing the items in an unordered list. Every time you get to a new object, make a new list.
Related
can someone please advise how can I convert this JSON body into a REST URI ?
GET api/_search
{
"age":"5",
"aggs" : {
"uniq_gender" : {
"terms" : { "field" : "Gender.keyword" }
}
}
}
You may proceed with one of two options:
Use POST with body
POST api/_search
{
"age":"5",
"aggs" : {
"uniq_gender" : {
"terms" : { "field" : "Gender.keyword" }
}
}
}
It may seem like a hack, but it is simple and frankly it is widely used. Basically from REST perspective it may be considered as resource creation (filter rather than seach might be a better word here).
Use query string with GET.
Something like:
GET api/_search?age=5,field=Gender.keyword
The problem with using query string is that it may be limited. In RFC there is a code for such a case. For example IE browser has such a limit - see details.
Generally speaking if there is no technical problem, readability issue may appear - it is hard to deal with 1000+ symbols string.
I'm trying to make a list in JSON. I'm using a tutorial I found on the internet and it seems to have a syntax error in it. I have no previous experience with JSON and I cannot figure out why this code shows an error. Line 2 in particular.
{
"quizlist":[
{
"question":"Portuguese is spoken in _______",
"option1":"Brazil",
"option2":"Argentina",
"option3":"Ecuador"
},
{
"question":"What is the capital of Peru?",
"option1":"Lima",
"option2":"Bogota",
"option3":"San Juan"
},
{
"question":"Which country is long and thin?",
"option1":"Chile",
"option2":"Uruguay",
"option3":"Colombia"
}
]}
I am using Dreamweaver CS6 as I am trying to create this for a website.
Thank you.
The JSON is fine. I have an intuition that you are trying to use this JSON as it is in html.You need to save the JSON as a javascript object. Try this:
var myJSON = {
"quizlist":[
{
"question":"Portuguese is spoken in _______",
"option1":"Brazil",
"option2":"Argentina",
"option3":"Ecuador"
},
{
"question":"What is the capital of Peru?",
"option1":"Lima",
"option2":"Bogota",
"option3":"San Juan"
},
{
"question":"Which country is long and thin?",
"option1":"Chile",
"option2":"Uruguay",
"option3":"Colombia"
}
]};
Then you can use this Javascript object myJSON wherever you want to use the JSON data.
Hope it helps .. :)
I am designing an API resonse for my mobile app right now, and response should contain array of operations. Some of them might have all attributes, some may not, see the example:
{
"operations":[
{
"type":"0",
"location":"01"
},
{
"type":"1",
"location":"1234"
"item_id":"",
"item_name":"Item A",
}
]
}
Is that a good way, or should I reconsider my design? I mean the varying number of attribues. Thank you!
Although It will be good for the bandwidth to keep the attributes out of the json string that doesn't have values. But I will suggest you to keep it other way, either send null or empty string "" it will be help at the decoding side
{
"operations":[
{
"type":"0",
"location":"01"
"item_id":null,
"item_name":null,
},
{
"type":"1",
"location":"1234"
"item_id":"",
"item_name":"Item A",
}
]
}
It depends on the code you'll be writing to handle the object :) As long as you write your code to handle missing elements you'll be fine.
Javascript couldn't give a hoot if an object in an array matches the structure of the other objects or not, if that's what you're concerned about.
p.s: Watch those comma's! They cause me more grief than anything else :p IE will break on a trailing comma :(
I have a simple json file which is :
{
"nodes":[
{"name":"Moe","group":1},
{"name":"Madih1","group":1},
{"name":"Madih2","group":1},
{"name":"Nora","group":1},
{"name":"Myna","group":1}
],
"links":[
{"source":35,"target":44,"value":1},
{"source":44,"target":35,"value":1},
{"source":45,"target":35,"value":1},
{"source":45,"target":44,"value":1},
{"source":35,"target":49,"value":1},
{"source":49,"target":35,"value":1}
]
}
when I save it use exactly the html code as shown in http://bl.ocks.org/4062045#index.html and address the above json, nothing appears on the cancas.
I appreciate it if you help me with this one as I am not very familiar with it. Moreover, it would be great if I know the minimum code required for drawing a graph like this using json.
Best,
The number of "source" and "target" refer to the index of the item in nodes array.
So you can change your json to following:
{
"nodes":[
{"name":"Moe","group":1},
{"name":"Madih1","group":1},
{"name":"Madih2","group":1},
{"name":"Nora","group":1},
{"name":"Myna","group":1}
],
"links":[
{"source":0,"target":1,"value":1},
{"source":1,"target":2,"value":1},
{"source":2,"target":3,"value":1},
{"source":3,"target":4,"value":1},
]
}
Then you can just copy the codes from http://bl.ocks.org/4062045#index.html example as the minimum code.
Remenber to change the json file to your own json file.
d3.json("path/to/your/json", function(error, graph) {
//codes
});
I am very new to Json but im trying to display a json file inside an html body.
my json file looks something like this
{ items: [
{
"thumb":"http://link/link.jpg",
"title":"title of the link",
"link":"http://link.html",
"popup":"false"
},
{
"thumb":"http://link/link2.jpg",
"title":"title of the link2",
"link":"http://link2.html",
"popup":"false"
},
{
"thumb":"http://link/link3.jpg",
"title":"title of the link3",
"link":"http://link3.html",
"popup":"false"
}
]}
and i want have this to be displayed inside my html body document...any suggestions?ideas?
Thank you
To answer your question literally:
<iframe width="800" height="400" src="your-file.json"></iframe>
I'm not sure you really want that, though.
Does the JSON really exist in a file, or are you returning it as an HTTP response?
Are you really just using plain HTML, or is a server or client-side scripting language playing a role?
Do you want that plain text in your document, or are you looking to use the data in some way?