使用 js/jquery 将 JSON 字符串格式化为 textarea 中的可读格式答案

【问题标题】：Format JSON string using js/jquery to readable format in textarea使用 js/jquery 将 JSON 字符串格式化为 textarea 中的可读格式
【发布时间】：2018-09-19 16:04:38
【问题描述】：

我有一个包含对象的 js 变量。我正在使用 jquery 将该对象中的数据传递给 html <textarea>。我还通过JSON.stringify 传递我的变量，所以代码如下所示：

$("#textarea1").val(JSON.stringify(myVarData, null, "\t"));

问题是双重的。

在<textarea> 中，数据包含在大括号{} 中，因为它仍在JSON 中-如何在将其发送到<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

标签： javascript jquery json stringify

【解决方案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,'')

【讨论】：

谢谢。这实际上是我的任务所需要的
很高兴为您提供帮助。 :)