How do I pretty print a hash to a Rails view?

Question

I have something like:

{"a":"1","b":"2","c":"3","asefw":"dfsef"}

I want to print it out in a view. What's the best way to do that?

I tried parsing it as a JSON object and using JSON.stringify, but it seems to mess up indentation.

Any advice? I don't mind a JavaScript solution.

Solution 1

How about:

require 'json'

hash = JSON['{"a":"1","b":"2","c":"3","asefw":"dfsef"}']
puts JSON.pretty_generate(hash)

Which outputs:

{
  "a": "1",
  "b": "2",
  "c": "3",
  "asefw": "dfsef"
}

JSON.pretty_generate is more of a debugging tool than something I'd rely on when actually generating JSON to be sent to a browser. The "pretty" aspect also means "bloated" and "slower" because of the added whitespace, but it is good for diagnosing and comprehending what is in the structure so it might work well for your needs.

One thing to remember is that HTML, when rendered by a browser, has whitespace gobbled up, so whitespace runs disappear. To avoid that you have to wrap the JSON output in a <pre> block to preserve the whitespace and line-breaks. Something like this should work:

<pre>
{
  "a": "1",
  "b": "2",
  "c": "3",
  "asefw": "dfsef"
}
</pre>

Solution 2

irb(main)> puts queried_object.pretty_inspect

From PrettyPrint, so may need to require 'pp' first for this to work.

This also works great for e.g. Rails.logger output.

Solution 3

<%= raw JSON.pretty_generate(hash).gsub(" ","&nbsp;") %>

Solution 4

If you (like I) find that the pretty_generate option built into Ruby's JSON library is not "pretty" enough, I recommend my own NeatJSON gem for your formatting.

To use it gem install neatjson and then use JSON.neat_generate instead of JSON.pretty_generate.

Like Ruby's pp it will keep objects and arrays on one line when they fit, but wrap to multiple as needed. For example:

{
  "navigation.createroute.poi":[
    {"text":"Lay in a course to the Hilton","params":{"poi":"Hilton"}},
    {"text":"Take me to the airport","params":{"poi":"airport"}},
    {"text":"Let's go to IHOP","params":{"poi":"IHOP"}},
    {"text":"Show me how to get to The Med","params":{"poi":"The Med"}},
    {"text":"Create a route to Arby's","params":{"poi":"Arby's"}},
    {
      "text":"Go to the Hilton by the Airport",
      "params":{"poi":"Hilton","location":"Airport"}
    },
    {
      "text":"Take me to the Fry's in Fresno",
      "params":{"poi":"Fry's","location":"Fresno"}
    }
  ],
  "navigation.eta":[
    {"text":"When will we get there?"},
    {"text":"When will I arrive?"},
    {"text":"What time will I get to the destination?"},
    {"text":"What time will I reach the destination?"},
    {"text":"What time will it be when I arrive?"}
  ]
}

It also supports a variety of formatting options to further customize your output. For example, how many spaces before/after colons? Before/after commas? Inside the brackets of arrays and objects? Do you want to sort the keys of your object? Do you want the colons to all be lined up?

For example, using your example Hash, you can get these different outputs, depending on what you want:

// JSON.neat_generate(o, wrap:true)
{
  "a":"1",
  "b":"2",
  "c":"3",
  "asefw":"dfsef"
}

// JSON.neat_generate o, wrap:true, aligned:true
{
  "a"    :"1",
  "b"    :"2",
  "c"    :"3",
  "asefw":"dfsef"
}

// JSON.neat_generate o, wrap:true, aligned:true, around_colon:1
{
  "a"     : "1",
  "b"     : "2",
  "c"     : "3",
  "asefw" : "dfsef"
}

Solution 5

You can try the gem awesome_print works very well, and in your view write

<%= ap(your_hash, plain: true, indent: 0).html_safe %>

also, you can change the values for config the styles to hash view

View more solutions