我想在 html 中将数据显示为 json
Posted
技术标签:
【中文标题】我想在 html 中将数据显示为 json【英文标题】：i want to display data as json in html 【发布时间】：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 一样读取它 可以在颤振中使用它
【问题讨论】：
请将代码添加为文本并使用适当的替代文本链接， 【参考方案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) 格式化数据
【讨论】：
以上是关于我想在 html 中将数据显示为 json的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Next JS 应用程序中将字符串转换为 HTML 元素？
如何在 Swift UI 中将嵌套的 JSON 值显示到选取器视图中？