我想在 html 中将数据显示为 json答案

【问题标题】：i want to display data as json in html我想在 html 中将数据显示为 json
【发布时间】：2021-07-09 22:05:03
【问题描述】：

我正在使用这个 1 作为我的颤振应用程序的 api（为 FutureBuilder 2 获取数据）

我想制作这样的页面，可以将我的数据放入其中，我厌倦了将我的数据放入 html 文件并上传到 3,好像是4

<body>
    <div>{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"emma.wong@reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"eve.holt@reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"charles.morris@reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"tracey.ramos@reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://reqres.in/img/faces/6-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}</div>
  </body>

当我使用邮递员 5 时，它会将链接读取为 HTML ，我希望邮递员像 json 一样读取它可以在颤振中使用它

【问题讨论】：

请将代码添加为文本并使用适当的替代文本链接，

标签： html json api flutter postman

【解决方案1】：

    <!DOCTYPE html>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
            </script>
            <script>
    $(document).ready(function(){
      let data = {"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"emma.wong@reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"eve.holt@reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"charles.morris@reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"tracey.ramos@reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://reqres.in/img/faces/6-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}
      data = JSON.stringify(data,null,4)
      $('pre').text(data)})
    </script>
        </head>
        <body>
            <pre>Toggle between slide up and slide down for a p element</pre>
        </body>
    </html>

使用 pre 标记显示，因为它将以格式化结构显示文本，使用脚本部分来格式化测试。使用 JSON.stringify(data,null,intent) 格式化数据

【讨论】：