收集了一些 JSON 工具

在开发过程中，遇到压缩后的 JSON 内容很常见，JSON 字符串的可阅读性很差，看起来是这样子的：

此时就需要一些工具帮助我们格式化 JSON 内容。

一、jsonformatter

jsonformatter 支持三种处理 json 的方式：

• 格式化
• 编辑器
• 校验器
• 支持长传文件

jsonformatter.curiousconcept

• 支持粘贴文件
• 支持拖拽文件
• 支持读取文件

jsonlint

主要功能：校验 JSON 数据结构

jsoncompare

一个增强的老 JSON 的检查工具：

• 批量校验
• 合并对比JSON

jsonviewernew

一个具有古老 UI 的 JSON 检查工具。特色功能是能够查找数据。

JSONHEARO

JSON 很糟糕。但我们正在让它变得更好。

React 中 JSON

• react-json-view

react-json-view

• react JSON 显示组件

// import the react-json-view component
import ReactJson from 'react-json-view'

// use the component in your app!
<ReactJson src={my_json_object} />

viewer.textea

import { JsonViewer } from '@textea/json-viewer' 

const object = { /* my json object */ }
const Component = () => (<JsonViewer value={object}/>)

vue

• vue-json-pretty

vue-json-pretty

<template>
  <div>
    <vue-json-pretty :data="{ key: 'value' }" />
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: {
    VueJsonPretty,
  },
};
</script>

一个易于使用并且还支持数据选择的 JSON 树视图组件。

Rust

serde 一个 Rust 序列化和反序列化的框架

一个简单的例子

use serde::{Serialize, Deserialize};

#[derive(Serialize, Deserialize, Debug)]
struct Point {
    x: i32,
    y: i32,
}

fn main() {
    let point = Point { x: 1, y: 2 };
    let serialized = serde_json::to_string(&point).unwrap();
    println!("serialized = {}", serialized);
    let deserialized: Point = serde_json::from_str(&serialized).unwrap();
    println!("deserialized = {:?}", deserialized);
}

自己制作 json 展示工具

• 基于 codemirror 支持 json 语言
• 基于 monoca 编辑器支持 json 语言

文章推荐

• codemirror + react 打造一个json可视化编辑器，附带jslint
• best-json-viewer 英文 Vue.js七个最好的 json 展示库
• 5 Best React Based JSON Viewer To Help View & Edit JSON Data
• How to Use React.js and Complex JSON Objects

小结

本文主要收集一些处理 JSON 的网站：格式化、校验、检查、编辑器等。同时 React/Vue 框架中使用对应的库。其实更加看重如何自己的写一个符合自己需求的 JSON 查看，可以是基于 codemirror 的编辑器等等。

同时当然欢迎补充！