使用 js/jquery 将 JSON 字符串格式化为 textarea 中的可读格式
Posted
技术标签:
【中文标题】使用 js/jquery 将 JSON 字符串格式化为 textarea 中的可读格式【英文标题】：Format JSON string using js/jquery to readable format in textarea 【发布时间】：2018-09-19 16:04:38 【问题描述】：我有一个包含对象的 js 变量。我正在使用 jquery 将该对象中的数据传递给 html <textarea>。我还通过JSON.stringify 传递我的变量，所以代码如下所示：
$("#textarea1").val(JSON.stringify(myVarData, null, "\t"));
问题是双重的。
-
在
<textarea> 中，数据包含在大括号<textarea> 之前将其删除？基本上是纯文本。
数据格式正确
"property":value,
"property":value,
"property":value
如果我有简单的数据也没关系，但在其中一个属性中，我有一个看起来像这样的值：
"report_data":""subjects":["subject_name":"ENGLISH","parent_subject_name":null,"teacher_id":39,"initials":"A.A.F","use_for_grading":true,"marks":"MID-TERM 1 2018":"mark":87,"grade_weight":100,"grade":"A","overall_mark":"87","overall_grade":"A","remarks":"Excellent","subject_name":"MATHEMATICS","parent_subject_name":null,"teacher_id":40,"initials":"B.K.K","use_for_grading":true,"marks":"MID-TERM 1 2018":"mark":80,"grade_weight":100,"grade":"A","overall_mark":"80","overall_grade":"A","remarks":"Excellent",
我怎样才能将这个value 数据格式化为像上面（1）中那样易于阅读？是否可以只从value 中选择我想要的？我尝试在stringify 之后使用JSON.parse，但结果是[object Object]。
注意这不是this 的重复，因为该问题是关于将对象复制到文本框。在我的问题的第一部分中-我希望数据不在大括号中-不再是 JSON。该解决方案提出了我已经在使用的方案。
【问题讨论】：
prettify json data in textarea input的可能重复JSON.parse是从JSON字符串中获取一个JS对象。
@31piy 它不是重复的，因为该问题的解决方案使用stringify 和stringify 上的缩进，我已经在我的问题中使用了。这是特定于删除大括号的。
@Clint_A -- 评论说可能重复。如果其他人发现它完全重复，他们也会投票结束这个问题。不然会有人回答的。
github.com/google/code-prettify
【参考方案1】：
1）您可以使用javascript子字符串方法删除大括号
例如：JSON.stringify(myVarData).substring(1,JSON.stringify(myVarData).length-1)
2）要在值对象中选择属性，通过父对象解析选择属性，然后进行字符串化
例如：打印第一个主题的分数 JSON.stringify(myVarData.report_data.subjects[0].marks)
【讨论】：
谢谢。您回答的第 1 部分解决了我的第一个问题。我将使用 for 循环测试第二部分，因为我不想硬编码我想要选择的内容，因为主题的数量是可变的【参考方案2】：var a = "report_data":"subjects":["subject_name":"ENGLISH","parent_subject_name":null,"teacher_id":39,"initials":"A.A.F","use_for_grading":true,"marks":"MID-TERM 1 2018":"mark":87,"grade_weight":100,"grade":"A","overall_mark":"87","overall_grade":"A","remarks":"Excellent","subject_name":"MATHEMATICS","parent_subject_name":null,"teacher_id":40,"initials":"B.K.K","use_for_grading":true,"marks":"MID-TERM 1 2018":"mark":80,"grade_weight":100,"grade":"A","overall_mark":"80","overall_grade":"A","remarks":"Excellent"]
console.log(JSON.stringify(a).replace(/[\[\]']+/g,'').replace(/[\\']+/g,''))
var final = JSON.stringify(a).replace(/[\[\]']+/g,'').replace(/[\\']+/g,'');
$("#textarea1").val(JSON.stringify(final, null, "\t"));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id = "textarea1"></div>
</body>
</html>快速优化的解决方案可以使用regular expression。
这里甚至不需要循环
只是使用，
JSON.stringify(myVarData).replace(/[\[\]']+/g,'').replace(/[\\']+/g,'')
【讨论】：
谢谢。这实际上是我的任务所需要的 很高兴为您提供帮助。 :)以上是关于使用 js/jquery 将 JSON 字符串格式化为 textarea 中的可读格式的主要内容，如果未能解决你的问题，请参考以下文章
通过在jquery中添加函数发送ajax请求来加载数据库数据，以json的格式发送到页面