How can I display the data from the JSON on my webpage?

Question

I am writing a script that sends an ajax request. The Cloud seems to response with the JSON, but how can I display the data from the JSON on my webpage?

Here the link for the pretty printed JSON.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
        <body>
            <button onclick="myFunctionPost()">Start</button>
            <script>
            function myFunctionPost() {
                jQuery.ajax( {
                    url: 'https://iotmmss0018275632trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/app.svc/T_IOT_77877E443B666B7FED2F?$format=json',
                    type: 'POST',
                    crossDomain: true,
                    dataType: 'jsonp',
                    success: function( response ) {
                        console.log(response);
                    }, 
                    error : function(error) {
                        console.log(error);
                    }   
                } );
            }
            </script>
        </body>
</html>

The response will be deserialised to an object, so you just need to access the properties to fill whatever HTML structure you need. We can't really offer any specific help as your question is too broad and you've not shown the HTML you want to create, however I'd suggest breaking the goal down in to tasks and googling them, ie. 'how do I create an element in jQuery?', 'how do I loop through an array?' etc. The jQuery docs will also help you: http://api.jquery.com. If you're still stuck with *a specific* issue, please ask another question giving full details about what you're trying to achieve — Rory McCrossan, Oct 10 '17 at 09:32
its depends on your requirements. If the data is coming as string then parse it to json object and you can get all the data inside your json — Arunprasanth K V, Oct 10 '17 at 09:36

score 0 · Answer 1 · answered Oct 10 '17 at 09:34

0

By var responseObject = json.parse(response) to make a javascript object.

And then do as you would with JS object? Hard to tell exact code without knowing what do you wanna display, in what HTML.

answered Oct 10 '17 at 09:34

DanteTheSmith

2,937
1
16
31

score 0 · Accepted Answer · answered Oct 10 '17 at 09:51

To achieve this you can use JSON.stringify() space argument. You will also need to wrap the output with <pre> </pre> will preserve the line spacing.

function myFunctionPost() {
  $.ajax( {
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: 'GET',
    success: function(response) {
      $('#pp').html('<pre>' + JSON.stringify(response, undefined, 4) + '</pre>');
    }, 
    error: function(error) {
      console.log(error);
    }   
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
        <body>
            <button onclick="myFunctionPost()">Start</button>
            <p id="pp"></p>
            
        </body>
</html>

Source: Does jQuery have a JSON/javascript object to HTML pretty print function similar to PHP's var_dump?

How can I display the data from the JSON on my webpage?

2 Answers2