如何将漂亮的json格式嵌入html静态页面？

Question

I have this code:

 public <T> String toJson(T item)
    {
        String json;
        ObjectWriter ow = new ObjectMapper().writer().withDefaultPrettyPrinter();
        try {
            json = ow.writeValueAsString(item);
        } catch (IOException e) {
            e.printStackTrace();
            json = "";
        }
        return json;
    }

I create a static html page form the server side (using gagawa ):

    java.util.Map<String, String> paramsMap = filterInterestingQueryParams(url);

    Li li4 = new Li().appendText("special params: " + jsonParser.toJson(paramsMap));

and yet my html looks broken.

How would you prettify that map into html?

*is there a way to limit line content by #chars? *a way to persist the pretty print?

Answer 1

The simplest way is to add some CSS to your page:

 li.wrap { word-wrap:break-word; } 

 <ul> <li>Really long special params: {stickToPath=8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,}</li> <li class="wrap">Really long special params (that wraps): {stickToPath=8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,8484.20202002,-481737.45454,}</li> </ul> 

As you can see, the second li with the wrap class wraps at the frame edge, while the other doesn't.

---

If you need the json to be pretty print you'll need to modify your output HTML and wrap the json in <pre> tags. By default these will retain line breaks and spaces.