How to make JSON array string to newline string in js?

Question

In React I'm trying to render the JSON data I'm getting from the server to readable data.

Here is the string from the server

"[{\"mat_type\":1,\"mat_title\":\"Title1\",\"mat_unit\":2,\"mat_price\":44000,\"mat_cost\":2000},{\"mat_type\":2,\"mat_title\":\"Title2\",\"mat_unit\":2,\"mat_price\":44000,\"mat_cost\":2000},{\"mat_id\":1,\"mat_title\":\"Title\",\"mat_unit\":2,\"mat_price\":4400,\"mat_cost\":2000,\"mat_status\":0}]"

I want to make it readable data with newline and spacing on it.

Here is my quick function

<Typography>
  {{JSON.parse(item.api_text).map((item) => {
    console.log(item);
    return `<br>${JSON.stringify(item, null, '\t')}</br>`;
  })} }
</Typography>

Here item.api_text is the string above. I know this will create error but I want something like this. Thanks

Edit: I want to display it like this on document not in console.

[{
    "mat_type": 1,
    "mat_title": "Title1",
    "mat_unit": 2,
    "mat_price": 44000,
    "mat_cost": 2000
},
{
    "mat_type": 2,
    "mat_title": "Title2",
    "mat_unit": 2,
    .....

'\t' might be in the wrong place. Try using JSON.stringify(item, '\t', 2) — evolutionxbox
– evolutionxbox, Commented Jan 5, 2022 at 15:55
To preserve line breaks and white space, wrap the json string output with a <pre> element — evolutionxbox
– evolutionxbox, Commented Jan 5, 2022 at 20:13

Serge · Accepted Answer · 2022-01-05 20:42:47Z

1

try this

var json="[{\"mat_type\":1,\"mat_title\":\"Title1\",\"mat_unit\":2,\"mat_price\":44000,\"mat_cost\":2000},{\"mat_type\":2,\"mat_title\":\"Title2\",\"mat_unit\":2,\"mat_price\":44000,\"mat_cost\":2000},{\"mat_id\":1,\"mat_title\":\"Title\",\"mat_unit\":2,\"mat_price\":4400,\"mat_cost\":2000,\"mat_status\":0}]";

<script type="text/javascript">

  $(document).ready(function () 
  {

var jo=JSON.parse(json);

json=JSON.stringify(jo,null,4);

 $("#json").html(json);

 });

</script>

create html

 <Typography id="json" style= "white-space: pre-wrap;">
</Typography>

output

[
    {
        "mat_type": 1,
        "mat_title": "Title1",
        "mat_unit": 2,
        "mat_price": 44000,
        "mat_cost": 2000
    },
    {
        "mat_type": 2,
        "mat_title": "Title2",
        "mat_unit": 2,
        "mat_price": 44000,
        "mat_cost": 2000
    },
    {
        "mat_id": 1,
        "mat_title": "Title",
        "mat_unit": 2,
        "mat_price": 4400,
        "mat_cost": 2000,
        "mat_status": 0
    }
]

edited Jan 5, 2022 at 20:42

answered Jan 5, 2022 at 17:21

Serge

44.4k4 gold badges26 silver badges53 bronze badges

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

5 Comments

xxxhomie21 Over a year ago

Ok. But I want it in the document, not in the console. Thanks

Serge Over a year ago

@xxxhomie21 You are welcome. Why it is in a console ? I can't see any console in my code. variable json is a string and that is it. It is not a free coders resource where everybody should create a full code for you. I posted a hint Your task is to put this string where to you want and tell everybody is it usefull or not .

Serge Over a year ago

@xxxhomie21 I updated my answer. Try it in your browser now.

xxxhomie21 Over a year ago

Thanks, that worked but in react we have to write style as style={{whiteSpace: 'pre-wrap'}} to get work. Have u used jquery in ur function?

Serge Over a year ago

@xxxhomie21 $("#json").html(json); is jquery but i can be easily replaced by javascript

xxxhomie21 · Accepted Answer · 2022-01-06 06:27:21Z

1

guys thanks to @evolutionxbox i've found a way to do this in react.

here inside my react component. pre works very well in preserving the next line.

            <pre>
              {JSON.stringify(JSON.parse(item.api_text), null, 3)}
            </pre>

Another alternative, style can be given to the tags known as white-space: 'pre-wrap', Thanks to @Serge. I've used </code/> to make it look better

          <Typography id='json' style={{whiteSpace: 'pre-wrap'}}>
            <code>
              {JSON.stringify(JSON.parse(item.api_text), null, 3)}
            </code>
          </Typography>

answered Jan 6, 2022 at 6:27

xxxhomie21

9112 bronze badges

Collectives™ on Stack Overflow

How to make JSON array string to newline string in js?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related