当前位置:首页 > 开发教程 > js/jQuery教程 >

jQuery中的JSON数据样式或格式

时间:2016-06-01 09:09 来源:互联网 作者:源码搜藏 收藏

在这篇文章中,我们将讨论我们如何能够格式化或风格 JSON 从服务器获

在这篇文章中,我们将讨论我们如何能够格式化或风格JSON从服务器获取。有时你可能需要出示你从你的API或从服务器在网页中得到确切的JSON。一般来说,如果你只绑定这个JSON以任何预先标记,它看起来就像是一条直线。难道不是吗?为了克服这一点,我们有一个选择的jQuery我希望你会喜欢这一点。

背景

在过去的几个月里,我与一些工作的Web API项目。大家都知道一个API的最佳输出为JSON,我从我的API返回的JSON。我想这显示在JSON预标记结果,但在一个格式化的方式或时尚的方式。在这里我要解释我们如何能做到这一点。

使用代码

在开始之前,请确保您已经添加了jQuery引用到您的网页。

<script src="scripts/jquery-2.2.3.js"></script>

现在让我们说,我们得到一个JSON从我们的API如下。

[{"AreaCode":"B697-31","Revenue":12747128.190000001},{"AreaCode":"B697-92","Revenue":7922559.1600000048},{"AreaCode":"B697-76","Revenue":7541039.540000001},{"AreaCode":"B697-46","Revenue":7076495.5800000066},{"AreaCode":"B553-131","Revenue":5738816.5099999979},{"AreaCode":"B553-193","Revenue":4608556.52},{"AreaCode":"B697-74","Revenue":3895194.1099999994},{"AreaCode":"D158-233","Revenue":3572808.989999996},{"AreaCode":"B697-78","Revenue":3512657.6999999937},{"AreaCode":"B672-31","Revenue":2955916.9800000032},{"AreaCode":"B553-46","Revenue":2806813.7100000042}]

这显然看起来像前面的时候,你只需将它添加到一个预先标记。

jQuery中的JSON数据样式或格式

JSON在PRE标记

现在我们如下将格式化这个JSON字符串使用jQuery解析和JQuery字符串化方法。

var tmpData = JSON.parse(data);
                  var formattedData = JSON.stringify(tmpData, null, '\t');
                  $('#output').text(formattedData);

这里的输出是我们定义如下我们预先标签的ID。

<pre id="output"></pre>

现在,如果你格式化后数据绑定到预先标签,你会得到一个不折不扣把如下。

jQuery中的JSON数据样式或格式

JSON在PRE标记输出

结论

我错过了什么,你可能会认为这是需要的?你会发现这个岗位作为有用吗?我希望你喜欢这篇文章。请分享你我的宝贵建议和反馈。


下一篇:没有了

js/jQuery教程阅读排行

最新文章