# 10. JSON 格式化显示

**作者**: [Lefe\_x](https://weibo.com/u/5953150140)

有时候我们想查看网络请求的内容，我们往往看到的结果是（格式非常混乱）：

```javascript
{"status":{"msg":"success","code":0},"data":{"book_info":[{"doc_id":"a4bdba4cf7ec4afe04a1df7c1","author":"Lefe_x","is_white_book":0,"rec_tag":"热门推荐","small_cover_url":"http:\/\/a3.att.hudong.com\/42\/58\/01300000820274128088583100471.jpg","rec_reason":"十分好看","book_title":"孩子你慢慢来"},{"doc_id":"a4bdba4cf7ec4afe04a1df7c3","author":"林语堂","is_white_book":0,"rec_tag":"","small_cover_url":"http:\/\/image.hexun.com\/book\/upload\/2013\/03\/07\/153148_20_c.jpg","rec_reason":"容易理解","book_title":"亲爱的安德烈"}]}}
```

上面这中方式，看起来非常不友好。如果能够显示成下图的格式，是不是很爽？我们来看看具体的实现。

![](/files/-LUYjkwkzCPj00kpeYg-)

想实现上面的效果，可以使用 JS 中的 `JSON.parse` 和 `JSON.stringify` 方法对 json 字符串转换，把转换后的结果使用 UITextView 或者 UILabel 显示出来即可。使用 UITextView 的好处是，内容太长直接可以滚动。图中的实现方式是使用的 `WKWebView`，目的是给 `Json 高亮`（高亮代码可以参考 highlight.min.js）。

iOS 中调用 JS 中的方法我们在知识小集的`《一本走心的JS-NA 交互电子书》`上有很详细的讲解，还不会 `JS-NA` 交互的朋友可以在知识小集公众号输入 jn 即可免费获得。

把用到的 JS 方法定义到一个 JS 文件中，命名为 `json_parse.js`：

![](/files/-LUYjkwmIvq1GRHHIq0X)

iOS 端的代码如下：

![](/files/-LUYjkwoL-_j4pS0mbX8)

有时候在 iOS 中实现不了的需求，可以想着用 JS 来实现，我觉得这是 iOS 与 JS 交互的奥妙之处。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://awesome-tips.gitbook.io/ios/webview/content-9.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.