Format JSON string to render in React component

Question

I'm trying to print a json string in a json format.

So, the input would be something like: "{\"a": 1, \"b\":\"2\"}"

I need the output to look like this:

{
  "a":1,
  "b":"2"
}

I have tried using JSON.stringify but it just prints out the same string. Any help is appreciated.

JSON is only ever a string. Other than not having a space between "a": and 1 (yeah... don't), you could parse to a JavaScript object, then stringify and give it a parameter to tell it to indent. — crashmstr
– crashmstr, Commented Mar 21, 2022 at 18:54
Does this answer your question? Safely turning a JSON string into an object — Emile Bergeron
– Emile Bergeron, Commented Mar 21, 2022 at 18:55
While re-reading the question, I figured that this old question would fit more than the one I suggested above. — Emile Bergeron
– Emile Bergeron, Commented Mar 21, 2022 at 18:58
And to render pre-formatted code, you might want to look at this one: stackoverflow.com/q/37213957/1218980 — Emile Bergeron
– Emile Bergeron, Commented Mar 21, 2022 at 19:01

hurricane · Accepted Answer · 2022-03-21 18:57:51Z

5

Parse your string to js object, than parse it to string to with new lines.

console.log(JSON.stringify(JSON.parse('{\"a": 1, \"b\":\"2\"}'), null, 2));

answered Mar 21, 2022 at 18:57

hurricane

6,7342 gold badges39 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charlie Stanard Over a year ago

Thank you! The responses on stackoverflow.com/questions/30765163/… omit JSON.parse(), which is the key to correctly formatting.

hadhulls · Accepted Answer · 2022-03-21 18:54:23Z

0

Before just running below code you should make a small change.

"{\"a": 1, \"b\":\"2\"}" ->
"{\"a\": 1, \"b\":\"2\"}"

const stringifiedJson = "{\"a\": 1, \"b\":\"2\"}";
const result = JSON.parse(json);
console.log(result);

answered Mar 21, 2022 at 18:54

hadhulls

11 bronze badge

Collectives™ on Stack Overflow

Format JSON string to render in React component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related