Format JSON string using js/jquery to readable format in textarea

Question

I have a js variable that contains an object. I'm passing the data in that object to a html <textarea> using jquery. I'm also passing my variable through JSON.stringify so the code looks like so:

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

The problem is twofold.

In the <textarea> the data is enclosed in curly brackets {} as it's still in JSON - How can I remove them before sending it to the <textarea>? Basically plain text.

The data is well formatted as

{ "property":value, 
  "property":value,
  "property":value }

which is okay if I had simple data, but in one of the properties, I have a value that looks like so:

"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"},

How can I get this value data formatted to be easily readable like in (1) above? Is it possible to choose only what I want from the value? I tried using JSON.parse after the stringify but got [object Object] as the result.

NOTE This isn't a duplicate of this as that question is about copying an object to a text box. In part one of my question - I want the data out of the curly brackets - which is no longer JSON. And that solution proposes what I'm already using.

Possible duplicate of [prettify json data in textarea input](https://stackoverflow.com/questions/26320525/prettify-json-data-in-textarea-input) — 31piy, Apr 10 '18 at 06:33
@31piy it not a duplicate as the solution to that question uses `stringify` and indentation on the `stringify` which I'm already using in my qusestion. And this is specific to removing the curly brackets. — Clint_A, Apr 10 '18 at 06:38
@Clint_A -- the comment says _possible duplicate_. If others find it an exact duplicate, they will also vote to close this question. Otherwise, someone will answer it. — 31piy, Apr 10 '18 at 06:42
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring — Sam Axe, Apr 10 '18 at 06:43
@Sravan I want the JSON data as formatted plain text in the text-area. I've already solved the first part of my question or removing the curly brackets using the answer given by DT Teja below. Now I'm trying the format the value that has an array of values (part 2 of the question) — Clint_A, Apr 10 '18 at 07:02
formAT the value means, you also need to remove all the braces from array? — Sravan, Apr 10 '18 at 07:03
@Sravan Yes - I'd like to remove all the braces from the array — Clint_A, Apr 10 '18 at 07:07

score 1 · Answer 1 · answered Apr 10 '18 at 06:49

1

1) You can use javascript substring method to remove the curly brackets {}

eg:JSON.stringify(myVarData).substring(1,JSON.stringify(myVarData).length-1)

2) To choose the property in a value object, select the property by parsing through parent object and then do stringify

eg: to print marks of first subject JSON.stringify(myVarData.report_data.subjects[0].marks)

answered Apr 10 '18 at 06:49

Dt Teja

46
5

Thanks. Part 1 of your answer solved my first problem. I'll test the second part using a for loop as I don't wan't to hard code what I want to select as the number of subjects are variable – Clint_A Apr 10 '18 at 07:05

Sravan · Accepted Answer · 2018-04-10T07:17:28.493

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>

The fast and optimized solution can be using regular expression.

No need to even loop here

just use,

JSON.stringify(myVarData).replace(/[\[\]']+/g,'').replace(/[\{\}']+/g,'')

Thanks. This is actually what I needed in my quest – Clint_A Apr 10 '18 at 07:20 — Clint_A, Apr 10 '18 at 07:20

Format JSON string using js/jquery to readable format in textarea

2 Answers2