收集了一些 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 的编辑器等等。

同时当然欢迎弥补！

收集了一些 JSON 工具