如何在我的网页上显示来自 JSON 的数据？答案

【问题标题】：How can I display the data from the JSON on my webpage?如何在我的网页上显示来自 JSON 的数据？
【发布时间】：2018-03-21 15:42:48
【问题描述】：

我正在编写一个发送 ajax 请求的脚本。云似乎响应 JSON，但如何在我的网页上显示来自 JSON 的数据？

Here 漂亮打印 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>

【问题讨论】：

响应将被反序列化为一个对象，因此您只需要访问属性来填充您需要的任何 HTML 结构。我们不能真正提供任何具体的帮助，因为您的问题太宽泛并且您没有显示您想要创建的 HTML，但是我建议将目标分解为任务并在谷歌上搜索它们，即。 '如何在 jQuery 中创建元素？'，'如何循环遍历数组？等等。jQuery 文档也会帮助你：api.jquery.com。如果您仍然遇到特定问题，请提出另一个问题，详细说明您想要实现的目标
这取决于您的要求。如果数据以字符串形式出现，则将其解析为 json 对象，您可以获取 json 中的所有数据

标签： javascript jquery json ajax pretty-print

【解决方案1】：

要实现这一点，您可以使用JSON.stringify() 空格参数。您还需要用<pre> </pre> 包裹输出，这样会保留行距。

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>

来源：Does jQuery have a JSON/javascript object to HTML pretty print function similar to PHP's var_dump?

【讨论】：

【解决方案2】：

通过var responseObject = json.parse(response) 制作一个javascript 对象。

然后像处理 JS 对象那样做？在不知道要显示什么内容的情况下很难说出确切的代码，用什么 HTML。

【讨论】：