Display Json in react JS div formatted properly

Question

I am trying to display a JSON object inside a div tag. I need to format it and indent properly. What is the easiest method to do?

Have you tried anything and it didn't work? Which part are you having difficulty with? — Ruan Mendes, Aug 01 '17 at 16:50
I tried using JSON.stringify inside
. But I'm getting the output displayed with \n and \t, and not indented. — Midhun Mathew Sunny, Aug 01 '17 at 17:28
Try this code: `JSON.stringify(jsonObject).replace(/[\\n\\t\\r]/g, '')` — Chandra Kumar, Aug 01 '17 at 17:42
I used JSONPretty library for reactJS as per Henrique's answer and it worked. — Midhun Mathew Sunny, Aug 01 '17 at 17:57
Is there anyway I can display this json indented in a text area — Midhun Mathew Sunny, Aug 01 '17 at 20:13
https://stackoverflow.com/questions/4810841/pretty-print-json-using-javascript?rq=1 — pankaj, Feb 02 '21 at 13:18

score 2 · Accepted Answer · answered Aug 01 '17 at 17:05

2

You will probably have to create your html based on each property of JSON and create your styles accordingly. However, you can use a third party component to do that for you. Check this one out:

https://github.com/chenckang/react-json-pretty

answered Aug 01 '17 at 17:05

Henrique Barros

868
7
12

Is there anyway I can display this json indented in a text area – Midhun Mathew Sunny Aug 01 '17 at 20:13

score 2 · Answer 2 · answered Aug 01 '17 at 17:10

Just you can use this code:

See demo here: https://jsbin.com/homilox/11/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
</head>
<body>
<script type="text/babel">
    var data = { "speakers": [
        { "firstname": "Ray",
            "lastname": "Villalobos",
            "category": "Front End",
            "title": "Bootstrap & CSS Preprocessors",
            "image": "http://barcampdeland.org/images/speaker_rayvillalobos.jpg",
            "link": "http://iviewsource.com",
            "bio": "Ray Villalobos is a full-time author and teacher at lynda.com. He is author of the book, Exploring Multimedia for Designers. He has more than 20 years experience in developing and programming multimedia projects. Previously at Entravision Communications, he designed and developed a network of radio station and TV web sites. As a senior producer for Tribune Interactive, he was responsible for designing orlandosentinel.com and for creating immersive multimedia projects and Flash games for the site.",
            "description": "As responsive design continues to take over the web, front-end developers and designers have turned to preprocessors and layout systems that simplify their workflow. Lynda.com staff author Ray Villalobos will talk about using the Bootstrap framework from Twitter to scaffold and fast track your responsive design. He'll talk about how you can use CodeKit and LESS to put together designs in hours instead of days."
        }
    ]};
    var Hello = React.createClass({
        render: function() {
            return <div><pre>{JSON.stringify(data, null, 2) }</pre></div>;
        }
    });

    ReactDOM.render(<Hello />, document.getElementById('container'));
  </script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

</body>
</html>

Tried this. I'm getting the json as a response from an api. Output is displayed with escape characters like \n and \t in a single line — Midhun Mathew Sunny, Aug 01 '17 at 17:26

Display Json in react JS div formatted properly

2 Answers2