json格式化显示样式js代码分享
时间: 2023-07-05 22:14:37 浏览: 46
以下是一个简单的 JavaScript 代码示例,用于将 JSON 对象格式化并以易读的方式显示:
```javascript
function prettyPrintJson(json) {
return JSON.stringify(json, null, 2);
}
// Example usage:
const myJsonObj = { "name": "John", "age": 30, "city": "New York" };
console.log(prettyPrintJson(myJsonObj));
```
该函数使用 JSON.stringify() 方法将 JSON 对象转换为字符串,并使用第二个参数指定缩进级别为 2,以使其易于阅读。在控制台上输出结果时,可以使用 console.log() 方法进行测试。
相关问题
前端将json对象数据格式化展示的方法
前端可以通过以下方法将 JSON 对象数据格式化展示:
1. 使用 JSON.stringify() 方法将 JSON 对象转换为字符串格式。
2. 使用 JSON.parse() 方法将字符串格式的 JSON 对象转换为 JavaScript 对象。
3. 使用 JSON Viewer 或其他 JSON 格式化工具将 JSON 对象格式化展示。
4. 使用 JavaScript 的循环和条件语句将 JSON 对象格式化展示,例如使用 for 循环遍历 JSON 对象的属性和值,并根据需要添加 HTML 标签和样式。
以下是一个使用 JSON Viewer 将 JSON 对象格式化展示的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON Viewer</title>
<script src="https://cdn.jsdelivr.net/npm/json-viewer@1.0.1/index.min.js"></script>
</head>
<body>
<div id="json"></div>
<script>
const data = { "name": "John", "age": 30, "city": "New York" };
document.getElementById("json").appendChild(JsonViewer(data));
</script>
</body>
</html>
```
这段代码将会在页面中展示一个格式化后的 JSON 对象,如下所示:
```
{
"name": "John",
"age": 30,
"city": "New York"
}
```
JSON.stringify格式化
在使用 `JSON.stringify()` 方法将 JavaScript 对象序列化为 JSON 字符串时,可以传入第三个参数 `space` 来指定缩进样式。
`space` 参数可以是一个数字或字符串类型。当 `space` 参数是数字类型时,表示使用指定数量的空格字符缩进每个级别的嵌套,默认为 `0`,即不缩进。当 `space` 参数是字符串类型时,表示使用指定字符串作为缩进字符,最多使用 10 个字符。例如:
```javascript
let obj = { a: 1, b: 2, c: { d: 3 } };
// 使用 4 个空格字符缩进
let str1 = JSON.stringify(obj, null, 4);
console.log(str1);
// 使用制表符缩进
let str2 = JSON.stringify(obj, null, '\t');
console.log(str2);
```
输出结果:
```
{
"a": 1,
"b": 2,
"c": {
"d": 3
}
}
```
```
{
"a": 1,
"b": 2,
"c": {
"d": 3
}
}
```
这样可以使得序列化后的 JSON 字符串更易于阅读和理解。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)