javascript - 将 JSON 字符串转换为 JSON 漂亮
javascript - Convert JSON string to JSON pretty
请求中（不是我写的）这个小脚本：
<script type="text/javascript">
function oncallback(e) {
$('#message').html(e.data);
}
</script>
写入浏览器window一个JSON字符串：
{"event":"success","method":"sale","request_id":"275936ad-83c0-4afd-88ff-6943c4ee2781","response_code":"A01","response_description":"TEST APPROVAL","trace_number":"8da65a44-3c07-4590-8b62-302f533aaa18","authorization_code":"123456","customer_token":"0InRBKpTSy2VlUL0wbLZlQ","paymethod_token":"vPSGgKycRXWWqkxiiXm_IA","total_amount":"8.88","order_number":"COR-199287","version_number":"1.0","last_4":"1111","method_used":"visa","hash_method":"md5","save_token":"true","expire_month":"02","expire_year":"2020","signature":"731c764db3d3d5c25e371fbffd331e5c","utc_time":"636584905150041669"}
我希望在浏览器中显示字符串 window 像这样非常漂亮：
{
"event": "success",
"method": "sale",
"request_id": "275936ad-83c0-4afd-88ff-6943c4ee2781",
"response_code": "A01",
"response_description": "TEST APPROVAL",
"trace_number": "8da65a44-3c07-4590-8b62-302f533aaa18",
"authorization_code": "123456",
"customer_token": "0InRBKpTSy2VlUL0wbLZlQ",
"paymethod_token": "vPSGgKycRXWWqkxiiXm_IA",
"total_amount": "8.88",
"order_number": "COR-199287",
"version_number": "1.0",
"last_4": "1111",
"method_used": "visa",
"hash_method": "md5",
"save_token": "true",
"expire_month": "02",
"expire_year": "2020",
"signature": "731c764db3d3d5c25e371fbffd331e5c",
"utc_time": "636584905150041669"
}
我尝试了 JSON.stringify() 的变体，但没有任何进展...
如：
JSON.stringify($('#message').html(e.data)),undefined, 2);
这可能吗？
完整脚本在这里：
https://www.calligraphydallas.com/stuff/forteco.new.php
如果您想查看最终的 JSON 响应字符串，请单击“立即付款”按钮并使用：
card number: 4111111111111111
expiry: anything in the future
CVV: any 3-digit number
编辑：还是不开心:(
<html>
<?php
$APILoginID = 'LI9KrwLnR';
$SecureTransKey = '5ULeuwN7N3h4';
$ordernumber = 'COR-199287';
$totalamount = 8.88;
$method = 'sale';
$version = '1.0';
$millitime = microtime(true) * 1000;
$utc = number_format(($millitime * 10000) + 621355968000000000 , 0, '.', '');
$data = "$APILoginID|$method|$version|$totalamount|$utc|$ordernumber||";
$hash = hash_hmac('md5',$data,$SecureTransKey);
$expire = number_format(($millitime * 10000) + 621355968001000000 , 0, '.', '');
?>
<head>
<style>
#message {
white-space: pre;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function oncallback(e) {
var jsonString = $('#message').html(e.data);
var str = JSON.stringify(jsonString, null, 2);
$('#message').html(str);
}
</script>
<script type="text/javascript" src="https://sandbox.forte.net/checkout/v1/js"></script> <!-- sandbox -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<pre id="message"></pre>
<button api_login_id=<?php echo $APILoginID;?>
version_number=<?php echo $version;?>
method=<?php echo $method;?>
callback="oncallback"
total_amount=<?php echo $totalamount;?>
utc_time=<?php echo $utc;?>
signature=<?php echo $hash;?>
billing_email_address_attr="required"
order_number=<?php echo $ordernumber;?>
consumer_id="123ABC"
>Pay Now</button>
</body>
</html>
编辑：
如果这是字符串：
{"event":"success","method":"sale","request_id":"e26ff0a0-1762-40f7-a747-f1d1e3da298d","response_code":"A01","response_description":"TEST APPROVAL","trace_number":"3f3ace6b-8e6c-4d53-8252-0e4df4af01bf","authorization_code":"123456","customer_token":"pNEFB2w4S5G5uhw4RAOnDA","paymethod_token":"tOxI8ULPQ8yJAk2zkIDFGQ","total_amount":"8.88","order_number":"COR-199287","version_number":"1.0","last_4":"1111","method_used":"visa","hash_method":"md5","save_token":"true","expire_month":"02","expire_year":"2020","signature":"31a7e07128e5a5d792dc0403b610a2fb","utc_time":"636585555449053529"}
由这个小脚本制作：
<script>
function oncallback(e) {
$('#message').html(e.data);
}
</script>
<html>
<body>
<pre id="message"></pre>
<button callback="oncallback"></button>
</body>
</html>
这似乎应该可行：
<script>
function oncallback(e) {
JSON.stringify($('#message').html(e.data),null,2);
}
</script>
<html>
<body>
<pre id="message"></pre>
<button callback="oncallback"></button>
</body>
</html>
但事实并非如此。它产生相同的字符串。
有人有想法吗？
JSON.stringify output to div in pretty print way
将您的 <div> 更改为 <pre>，它应该可以工作。
var stuff = {
"event": "success",
"method": "sale",
"request_id": "275936ad-83c0-4afd-88ff-6943c4ee2781",
"response_code": "A01",
"response_description": "TEST APPROVAL",
"trace_number": "8da65a44-3c07-4590-8b62-302f533aaa18",
"authorization_code": "123456",
"customer_token": "0InRBKpTSy2VlUL0wbLZlQ",
"paymethod_token": "vPSGgKycRXWWqkxiiXm_IA",
"total_amount": "8.88",
"order_number": "COR-199287",
"version_number": "1.0",
"last_4": "1111",
"method_used": "visa",
"hash_method": "md5",
"save_token": "true",
"expire_month": "02",
"expire_year": "2020",
"signature": "731c764db3d3d5c25e371fbffd331e5c",
"utc_time": "636584905150041669"
};
var str = JSON.stringify(stuff, null, 2); // spacing level = 2
$('#message').html(str)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<pre id='message'>
</pre>
</body>
</html>
为了适合你的例子：
<script>
function oncallback(e) {
var formatted_json = JSON.stringify(e.data, null, 2);
$('#message').html(formatted_json);
}
</script>
<html>
<body>
<pre id="message"></pre>
<button callback="oncallback"></button>
</body>
</html>
如果e.data是一个JSON字符串，可以使用pre标签显示，如果不行，可以使用JS-beautify库来显示请格式化您的 JSON 字符串。
json_string = `{"success":true,"message":"","result":[{"MarketName":"BTC-2GIVE","High":0.00000073,"Low":0.00000068,"Volume":790977.87467493,"Last":0.00000072,"BaseVolume":0.56122489,"TimeStamp":"2018-04-05T02:47:06.43","Bid":0.00000071,"Ask":0.00000072,"OpenBuyOrders":98,"OpenSellOrders":913,"PrevDay":0.00000070,"Created":"2016-05-16T06:44:15.287"},{"MarketName":"BTC-ABY","High":0.00000089,"Low":0.00000084,"Volume":4401237.65534640,"Last":0.00000084,"BaseVolume":3.76668598,"TimeStamp":"2018-04-05T02:46:16.137","Bid":0.00000084,"Ask":0.00000086,"OpenBuyOrders":223,"OpenSellOrders":1572,"PrevDay":0.00000087,"Created":"2014-10-31T01:43:25.743"},{"MarketName":"BTC-ADA","High":0.00002334,"Low":0.00002172,"Volume":48936131.81817110,"Last":0.00002193,"BaseVolume":1099.49743017,"TimeStamp":"2018-04-05T02:47:35.6","Bid":0.00002193,"Ask":0.00002194,"OpenBuyOrders":4187,"OpenSellOrders":11490,"PrevDay":0.00002245,"Created":"2017-09-29T07:01:58.873"},{"MarketName":"BTC-ADT","High":0.00000409,"Low":0.00000377,"Volume":8790985.59406923,"Last":0.00000380,"BaseVolume":34.55251768,"TimeStamp":"2018-04-05T02:47:39.163","Bid":0.00000380,"Ask":0.00000384,"OpenBuyOrders":186,"OpenSellOrders":2137,"PrevDay":0.00000395,"Created":"2017-07-03T21:08:06.11"}]}`;
formatted = js_beautify(json_string,{
indent_char:" ",
indent_size:2,
"indent_with_tabs": false,
});
document.getElementById('result').innerText = formatted;
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script>
<pre id= 'result'></pre>
参考：JSON.stringify output to div in pretty print way
请求中（不是我写的）这个小脚本：
<script type="text/javascript">
function oncallback(e) {
$('#message').html(e.data);
}
</script>
写入浏览器window一个JSON字符串：
{"event":"success","method":"sale","request_id":"275936ad-83c0-4afd-88ff-6943c4ee2781","response_code":"A01","response_description":"TEST APPROVAL","trace_number":"8da65a44-3c07-4590-8b62-302f533aaa18","authorization_code":"123456","customer_token":"0InRBKpTSy2VlUL0wbLZlQ","paymethod_token":"vPSGgKycRXWWqkxiiXm_IA","total_amount":"8.88","order_number":"COR-199287","version_number":"1.0","last_4":"1111","method_used":"visa","hash_method":"md5","save_token":"true","expire_month":"02","expire_year":"2020","signature":"731c764db3d3d5c25e371fbffd331e5c","utc_time":"636584905150041669"}
我希望在浏览器中显示字符串 window 像这样非常漂亮：
{
"event": "success",
"method": "sale",
"request_id": "275936ad-83c0-4afd-88ff-6943c4ee2781",
"response_code": "A01",
"response_description": "TEST APPROVAL",
"trace_number": "8da65a44-3c07-4590-8b62-302f533aaa18",
"authorization_code": "123456",
"customer_token": "0InRBKpTSy2VlUL0wbLZlQ",
"paymethod_token": "vPSGgKycRXWWqkxiiXm_IA",
"total_amount": "8.88",
"order_number": "COR-199287",
"version_number": "1.0",
"last_4": "1111",
"method_used": "visa",
"hash_method": "md5",
"save_token": "true",
"expire_month": "02",
"expire_year": "2020",
"signature": "731c764db3d3d5c25e371fbffd331e5c",
"utc_time": "636584905150041669"
}
我尝试了 JSON.stringify() 的变体，但没有任何进展...
如：
JSON.stringify($('#message').html(e.data)),undefined, 2);
这可能吗？
完整脚本在这里： https://www.calligraphydallas.com/stuff/forteco.new.php
如果您想查看最终的 JSON 响应字符串，请单击“立即付款”按钮并使用：
card number: 4111111111111111
expiry: anything in the future
CVV: any 3-digit number
编辑：还是不开心:(
<html>
<?php
$APILoginID = 'LI9KrwLnR';
$SecureTransKey = '5ULeuwN7N3h4';
$ordernumber = 'COR-199287';
$totalamount = 8.88;
$method = 'sale';
$version = '1.0';
$millitime = microtime(true) * 1000;
$utc = number_format(($millitime * 10000) + 621355968000000000 , 0, '.', '');
$data = "$APILoginID|$method|$version|$totalamount|$utc|$ordernumber||";
$hash = hash_hmac('md5',$data,$SecureTransKey);
$expire = number_format(($millitime * 10000) + 621355968001000000 , 0, '.', '');
?>
<head>
<style>
#message {
white-space: pre;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function oncallback(e) {
var jsonString = $('#message').html(e.data);
var str = JSON.stringify(jsonString, null, 2);
$('#message').html(str);
}
</script>
<script type="text/javascript" src="https://sandbox.forte.net/checkout/v1/js"></script> <!-- sandbox -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<pre id="message"></pre>
<button api_login_id=<?php echo $APILoginID;?>
version_number=<?php echo $version;?>
method=<?php echo $method;?>
callback="oncallback"
total_amount=<?php echo $totalamount;?>
utc_time=<?php echo $utc;?>
signature=<?php echo $hash;?>
billing_email_address_attr="required"
order_number=<?php echo $ordernumber;?>
consumer_id="123ABC"
>Pay Now</button>
</body>
</html>
编辑：
如果这是字符串：
{"event":"success","method":"sale","request_id":"e26ff0a0-1762-40f7-a747-f1d1e3da298d","response_code":"A01","response_description":"TEST APPROVAL","trace_number":"3f3ace6b-8e6c-4d53-8252-0e4df4af01bf","authorization_code":"123456","customer_token":"pNEFB2w4S5G5uhw4RAOnDA","paymethod_token":"tOxI8ULPQ8yJAk2zkIDFGQ","total_amount":"8.88","order_number":"COR-199287","version_number":"1.0","last_4":"1111","method_used":"visa","hash_method":"md5","save_token":"true","expire_month":"02","expire_year":"2020","signature":"31a7e07128e5a5d792dc0403b610a2fb","utc_time":"636585555449053529"}
由这个小脚本制作：
<script>
function oncallback(e) {
$('#message').html(e.data);
}
</script>
<html>
<body>
<pre id="message"></pre>
<button callback="oncallback"></button>
</body>
</html>
这似乎应该可行：
<script>
function oncallback(e) {
JSON.stringify($('#message').html(e.data),null,2);
}
</script>
<html>
<body>
<pre id="message"></pre>
<button callback="oncallback"></button>
</body>
</html>
但事实并非如此。它产生相同的字符串。
有人有想法吗？
JSON.stringify output to div in pretty print way
将您的 <div> 更改为 <pre>，它应该可以工作。
var stuff = {
"event": "success",
"method": "sale",
"request_id": "275936ad-83c0-4afd-88ff-6943c4ee2781",
"response_code": "A01",
"response_description": "TEST APPROVAL",
"trace_number": "8da65a44-3c07-4590-8b62-302f533aaa18",
"authorization_code": "123456",
"customer_token": "0InRBKpTSy2VlUL0wbLZlQ",
"paymethod_token": "vPSGgKycRXWWqkxiiXm_IA",
"total_amount": "8.88",
"order_number": "COR-199287",
"version_number": "1.0",
"last_4": "1111",
"method_used": "visa",
"hash_method": "md5",
"save_token": "true",
"expire_month": "02",
"expire_year": "2020",
"signature": "731c764db3d3d5c25e371fbffd331e5c",
"utc_time": "636584905150041669"
};
var str = JSON.stringify(stuff, null, 2); // spacing level = 2
$('#message').html(str)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<pre id='message'>
</pre>
</body>
</html>
为了适合你的例子：
<script>
function oncallback(e) {
var formatted_json = JSON.stringify(e.data, null, 2);
$('#message').html(formatted_json);
}
</script>
<html>
<body>
<pre id="message"></pre>
<button callback="oncallback"></button>
</body>
</html>
如果e.data是一个JSON字符串，可以使用pre标签显示，如果不行，可以使用JS-beautify库来显示请格式化您的 JSON 字符串。
json_string = `{"success":true,"message":"","result":[{"MarketName":"BTC-2GIVE","High":0.00000073,"Low":0.00000068,"Volume":790977.87467493,"Last":0.00000072,"BaseVolume":0.56122489,"TimeStamp":"2018-04-05T02:47:06.43","Bid":0.00000071,"Ask":0.00000072,"OpenBuyOrders":98,"OpenSellOrders":913,"PrevDay":0.00000070,"Created":"2016-05-16T06:44:15.287"},{"MarketName":"BTC-ABY","High":0.00000089,"Low":0.00000084,"Volume":4401237.65534640,"Last":0.00000084,"BaseVolume":3.76668598,"TimeStamp":"2018-04-05T02:46:16.137","Bid":0.00000084,"Ask":0.00000086,"OpenBuyOrders":223,"OpenSellOrders":1572,"PrevDay":0.00000087,"Created":"2014-10-31T01:43:25.743"},{"MarketName":"BTC-ADA","High":0.00002334,"Low":0.00002172,"Volume":48936131.81817110,"Last":0.00002193,"BaseVolume":1099.49743017,"TimeStamp":"2018-04-05T02:47:35.6","Bid":0.00002193,"Ask":0.00002194,"OpenBuyOrders":4187,"OpenSellOrders":11490,"PrevDay":0.00002245,"Created":"2017-09-29T07:01:58.873"},{"MarketName":"BTC-ADT","High":0.00000409,"Low":0.00000377,"Volume":8790985.59406923,"Last":0.00000380,"BaseVolume":34.55251768,"TimeStamp":"2018-04-05T02:47:39.163","Bid":0.00000380,"Ask":0.00000384,"OpenBuyOrders":186,"OpenSellOrders":2137,"PrevDay":0.00000395,"Created":"2017-07-03T21:08:06.11"}]}`;
formatted = js_beautify(json_string,{
indent_char:" ",
indent_size:2,
"indent_with_tabs": false,
});
document.getElementById('result').innerText = formatted;
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script>
<pre id= 'result'></pre>
参考：JSON.stringify output to div in pretty print way