CODEWITHSUNDEEP
htmljsonreactjs
Midhun Mathew Sunny
Midhun Mathew Sunny

Reputation: 1361

Display Json in react JS div formatted properly

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?

Upvotes: 1

Views: 10414

Answers (2)

Chandra Kumar
Chandra Kumar

Reputation: 4205

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>

Upvotes: 2

Henrique Barros
Henrique Barros

Reputation: 868

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

Upvotes: 2

Related Questions