相关数据格式化参考

jsonhero-web

https://github.com/triggerdotdev/jsonhero-web
快速浏览、搜索和导航 JSON 文件

  1. 搜索您的 JSON 文件（键和值
  2. 自动推断字符串的内容并提供有用的预览
  3. 多种查看方式：列视图、树视图、编辑器视图
  4. Column View多栏方式，浏览 JSON 文档

image.png

react-json-vew

Github https://github.com/mac-s-g/react-json-view
JSON预览 https://mac-s-g.github.io/react-json-view/demo/dist
image.png

  1. yarn add react-json-view

JsonView

JsonView组件 格式化 JSON效果
image.png

  1. import React, { memo } from 'react';
  2. import PropTypes from 'prop-types';
  3. import ReactJson from 'react-json-view';
  5. const attrs = {
  6.   indentWidth: 2, // 2个空格缩进
  7.   enableClipboard: false, // 禁止复制
  8. };
  10. JsonView.propTypes = {
  11.   dataSource: PropTypes.oneOfType([
  12.     PropTypes.array,
  13.     PropTypes.object,
  14.   ]),
  15. };
  16. JsonView.defaultProps = {
  17.   dataSource: [],
  18. };
  20. function JsonView({ dataSource }) {
  21.   return (
  22.     <ReactJson src={dataSource} {...attrs} />
  23.   );
  24. }
  26. function propsEqual({ dataSource }, props) {
  27.   return dataSource === props.dataSource;
  28. }
  30. export default memo(JsonView, propsEqual);

点击复制

image.png

JSON.stringify格式化JSON

  1. <pre>JSON.stringify(data, null, 2)</pre>