前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《Chrome插件英雄榜》第95篇更新!JsonFormatter轻量化开源Json格式化工具,查看一言api接口字段数据结构

《Chrome插件英雄榜》第95篇更新!JsonFormatter轻量化开源Json格式化工具,查看一言api接口字段数据结构

作者头像
zhaoolee
修改2023-09-24 19:27:48
8290
修改2023-09-24 19:27:48
举报
文章被收录于专栏:木子昭的博客木子昭的博客

JsonFormatter可以让开发者在浏览器查看接口的的层级信息,方便开发。

JsonFormatter的使用非常简单,安装即可自动生效,处理的效果也很明显,让json数据结构清晰可见。

我们以一言接口为例

https://v1.hitokoto.cn/?encode=json

原版

原版 星星只有在夜里才璀璨夺目啊

启用扩展程序JsonFormatter处理后

扩展程序JsonFormatter处理后

数据结构顿时一目了然

2021-02-18 10.45.27

如何使用Json返回的数据

在网页插入以下代码

代码语言:javascript
复制
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<h2>经典台词</h2>
<div id="yiyan_hitokoto"></div>
<div id="yiyan_from" style="text-align: right">
</div>
<script>
         jQuery.ajax({url:'https://v1.hitokoto.cn/'}).done(function(content,err){
        console.log("content::", content, "err::", err);
        if(err === "success"){
            var yiyan_hitokoto = "";
            var yiyan_from= "";
                    console.log("content22::", content, "err::", err);
            yiyan_hitokoto = content.hitokoto;
                       yiyan_from ="--" + content.from;
                    
                    console.log("=yiyan_hitokoto=>>", yiyan_hitokoto);
                                        console.log("=yiyan_from=>>", yiyan_from);

            jQuery("#yiyan_hitokoto").html(yiyan_hitokoto);
                    jQuery("#yiyan_from").html(yiyan_from);
        }

    })
</script>

最终效果为:

经典台词

每次刷新页面,都会自动更新内容

《JsonFormatter》开源地址

https://github.com/callumlocke/json-formatter

《JsonFormatter》 下载链接

Chrome商店

https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa

Edge商店

https://microsoftedge.microsoft.com/addons/detail/json-formatter-for-edge/njpoigijhgbionbfdbaopheedbpdoddi

离线包

https://raw.githubusercontent.com/zhaoolee/ChromeAppHeroes/master/backup/095-json-formatter.zip

小结

JsonFormatter几乎是开发必备的工具,没有什么附加功能,使用简单,轻量高效,功能够用。

写在最后(我需要你的支持) / At the end (I need your support)

  • 本文属于Chrome插件英雄榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/ChromeAppHeroes
  • This article is part of the ChromeAppHeroes project. Github link : https://github.com/zhaoolee/ChromeAppHeroes
  • Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类, 如果你喜欢这个项目, 希望你能为本项目添加一颗 ?星.
  • ChromeAppHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human, If you like this project, I hope you can add a star ? to this project.
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 我们以一言接口为例
  • 原版
    • 启用扩展程序JsonFormatter处理后
    • 如何使用Json返回的数据
    • 《JsonFormatter》开源地址
    • 《JsonFormatter》 下载链接
      • Chrome商店
        • Edge商店
          • 离线包
          • 小结
          • 写在最后(我需要你的支持) / At the end (I need your support)
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档