Question

I want to display some json “beautified” from an api in a view for debug purposes. For example, instead of displaying:

{"observations"=>{"realtime_start"=>"1776-07-04", "realtime_end"=>"9999-12-31", "observation_start"=>"1776-07-04", "observation_end"=>"9999-12-31", "units"=>"lin", "output_type"=>"1", "file_type"=>"xml", "order_by"=>"observation_date", "sort_order"=>"desc", "count"=>"2541", "offset"=>"0", "limit"=>"10", "observation"=>[{"realtime_start"=>"2013-01-10", "realtime_end"=>"9999-12-31", "date"=>"2012-12-01", "value"=>"1458.750"}, {"realtime_start"=>"2012-12-13", "realtime_end"=>"2012-12-19", "date"=>"2012-11-01", "value"=>"1435.307"}, {"realtime_start"=>"2012-12-20", "realtime_end"=>"2013-01-09", "date"=>"2012-11-01", "value"=>"1435.304"}, {"realtime_start"=>"2013-01-10", "realtime_end"=>"9999-12-31", "date"=>"2012-11-01", "value"=>"1435.303"}, {"realtime_start"=>"2012-11-01", "realtime_end"=>"2012-11-07", "date"=>"2012-10-01", "value"=>"1418.277"}, {"realtime_start"=>"2012-11-08", "realtime_end"=>"2012-11-14", "date"=>"2012-10-01", "value"=>"1418.286"}, {"realtime_start"=>"2012-11-15", "realtime_end"=>"2012-11-22", "date"=>"2012-10-01", "value"=>"1418.285"}, {"realtime_start"=>"2012-11-23", "realtime_end"=>"2012-11-28", "date"=>"2012-10-01", "value"=>"1418.284"}, {"realtime_start"=>"2012-11-29", "realtime_end"=>"9999-12-31", "date"=>"2012-10-01", "value"=>"1418.274"}, {"realtime_start"=>"2012-10-04", "realtime_end"=>"2012-10-10", "date"=>"2012-09-01", "value"=>"1409.636"}]}}

…I want to display:

{
"observations": {
    "realtime_start": "1776-07-04",
    "realtime_end": "9999-12-31",
    "observation_start": "1776-07-04",
    "observation_end": "9999-12-31",
    "units": "lin",
    "output_type": "1",
    "file_type": "xml",
    "order_by": "observation_date",
    "sort_order": "desc",
    "count": "2541",
    "offset": "0",
    "limit": "10",
    "observation": [{
        "realtime_start": "2013-01-10",
        "realtime_end": "9999-12-31",
        "date": "2012-12-01",
        "value": "1458.750"
    }, {
        "realtime_start": "2012-12-13",
        "realtime_end": "2012-12-19",
        "date": "2012-11-01",
        "value": "1435.307"
    }, {
        "realtime_start": "2012-12-20",
        "realtime_end": "2013-01-09",
        "date": "2012-11-01",
        "value": "1435.304"
    }, {
        "realtime_start": "2013-01-10",
        "realtime_end": "9999-12-31",
        "date": "2012-11-01",
        "value": "1435.303"
    }, {
        "realtime_start": "2012-11-01",
        "realtime_end": "2012-11-07",
        "date": "2012-10-01",
        "value": "1418.277"
    }, {
        "realtime_start": "2012-11-08",
        "realtime_end": "2012-11-14",
        "date": "2012-10-01",
        "value": "1418.286"
    }, {
        "realtime_start": "2012-11-15",
        "realtime_end": "2012-11-22",
        "date": "2012-10-01",
        "value": "1418.285"
    }, {
        "realtime_start": "2012-11-23",
        "realtime_end": "2012-11-28",
        "date": "2012-10-01",
        "value": "1418.284"
    }, {
        "realtime_start": "2012-11-29",
        "realtime_end": "9999-12-31",
        "date": "2012-10-01",
        "value": "1418.274"
    }, {
        "realtime_start": "2012-10-04",
        "realtime_end": "2012-10-10",
        "date": "2012-09-01",
        "value": "1409.636"
    }]
}

}

When I assign a variable @beautifiedJson = JSON.pretty_generate(parseHolder), with parseHolder being the json object and then place @beautifiedJson in my view via:

    <%= @beautifiedJson %>

…the view isn’t beautified. When I view the page source the json is formatted (proper indent and lines), however, the necessary html formatting for this to show up correctly in the view is not in place.

My question is whether I’m utilizing the rails JSON method correctly or do I need another method to accomplish the formatting?

Answer 1

Use:

<pre>
    <%= @beautifiedJson %>
</pre>

If you look at the page source generated by your original code, you’ll see that it had been beautified but the browser was ignoring the newlines and tabs that the JSON.pretty_generate(parseHolder) was adding.