likes
comments
collection
share

html展示格式化json数据，利用pre展示格式化数据

作者站长头像
站长
· 阅读数 69

html展示格式化json数据，利用pre展示格式化数据

核心：JSON.stringify(jsonText, null, 4);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <pre id="text" style="width: 800px;height: 500px;"></pre>
  <script>
    let str = "[{\"data\":{\"timeStamp\":1636524516291,\"processDefinitionId\":\"ceshi:1:65008\",\"createTime\":1636524516291,\"businessKey\":\"{}\",\"id\":\"70001\",\"userId\":\"7995a3538c8d4fa89cf2ebc3e34ccc5c\"}},{\"data\":{\"timeStamp\":1636524516295,\"activityId\":\"Event_1ot6qeg\",\"processDefinitionId\":\"ceshi:1:65008\",\"processInstanceId\":\"70001\",\"executionId\":\"70003\",\"behaviorClass\":\"org.activiti.engine.impl.bpmn.behavior.NoneStartEventActivityBehavior\",\"activityType\":\"startEvent\",\"userId\":\"7995a3538c8d4fa89cf2ebc3e34ccc5c\"}},{\"data\":{\"timeStamp\":1636524516296,\"activityId\":\"Event_1ot6qeg\",\"processDefinitionId\":\"ceshi:1:65008\",\"processInstanceId\":\"70001\",\"executionId\":\"70003\",\"behaviorClass\":\"org.activiti.engine.impl.bpmn.behavior.NoneStartEventActivityBehavior\",\"activityType\":\"startEvent\",\"userId\":\"7995a3538c8d4fa89cf2ebc3e34ccc5c\"}},{\"data\":{\"targetActivityId\":\"Activity_0sjwzn2\",\"timeStamp\":1636524516298,\"targetActivityBehaviorClass\":\"org.activiti.engine.impl.bpmn.behavior.UserTaskActivityBehavior\",\"sourceActivityType\":\"org.activiti.bpmn.model.StartEvent\",\"targetActivityName\":\"测试\",\"id\":\"Flow_0m3k4fi\",\"userId\":\"7995a3538c8d4fa89cf2ebc3e34ccc5c\",\"sourceActivityBehaviorClass\":\"org.activiti.engine.impl.bpmn.behavior.NoneStartEventActivityBehavior\",\"targetActivityType\":\"org.activiti.bpmn.model.UserTask\",\"sourceActivityId\":\"Event_1ot6qeg\"}},{\"data\":{\"timeStamp\":1636524516298,\"activityId\":\"Activity_0sjwzn2\",\"processDefinitionId\":\"ceshi:1:65008\",\"processInstanceId\":\"70001\",\"executionId\":\"70003\",\"behaviorClass\":\"org.activiti.engine.impl.bpmn.behavior.UserTaskActivityBehavior\",\"activityName\":\"测试\",\"activityType\":\"userTask\",\"userId\":\"7995a3538c8d4fa89cf2ebc3e34ccc5c\"}},{\"data\":{\"timeStamp\":1636524516332,\"taskDefinitionKey\":\"Activity_0sjwzn2\",\"processDefinitionId\":\"ceshi:1:65008\",\"processInstanceId\":\"70001\",\"executionId\":\"70003\",\"createTime\":1636524516298,\"name\":\"测试\",\"id\":\"70006\",\"priority\":50,\"userId\":\"7995a3538c8d4fa89cf2ebc3e34ccc5c\"}}]"

    let text = document.querySelector("#text");
    let jsonText = JSON.parse(str);
    text.innerHTML = JSON.stringify(jsonText, null, 4);
  </script>
</body>

</html>
转载自:https://segmentfault.com/a/1190000040978855
评论
请登录