Json data string format formatting

Json data string format formatting

In daily work, Json data is usually used in the scene of interacting with the backend, but Json data is rarely displayed directly on the front-end interface. Here is a simple method JSON.stringify() for json data formatting .

JSON.stringify():

parameter:

  1. value : The value to be serialized into a JSON string.
  2. replacer (optional): If the parameter is a function, each attribute of the serialized value will be converted and processed by the function during the serialization process; if the parameter is an array, only the Only the property names in the array will be serialized into the final JSON string; if this parameter is null or not provided, all properties of the object will be serialized.
  3. space (optional): Specifies the blank string for indentation, used to beautify the output (pretty-print); if the parameter is a number, it represents how many spaces there are; the upper limit is 10. If the value is less than 1, it means there is no space; if the parameter is a string (when the length of the string exceeds 10 letters, take the first 10 letters), the string will be regarded as a space; if the parameter is not provided ( or null), there will be no spaces.

Return Value:
A JSON string representing the given value.

Formatting effect:

insert image description here
Implementation code: It should be noted that it is necessary to use HTML-like <pre> tags to display definable pre-formatted text.

let jsonData = {
    
    
	"result": "OK",
	"data": [
		{
    
    
			" result": "OK",
			"检测数据": {
    
    
				"漏电流(mA)": "0.04",
				"理论时间[HH:MM:SS]": "00:01:00"
			},
			"检测方案": {
    
    
				"漏电流(mA)": "1.0",
				"上升时间(S)": "30",
				"测试时间(s)": "60",
				"耐压方式": "电压电流对辅助",
				"耐压值(KV)": "3.5"
			}
		}
	],
	"data_time": "2022-08-30 17:46:31",
	"product_id": "P095161863",
	"secondary_process_node": "HighVoltageA",
	"execute_result": "00000001",
	"process_node": "DXJC-0002"
}
JSON.stringify(jsonData,null,'\t')

Guess you like

Origin blog.csdn.net/weixin_42927679/article/details/126609118