如何解析 JSON 文件以在 html 表单元格中显示它的元素

By simon at 7 天前 • 0人收藏 • 2人看过

我正在尝试构建一个指示板,它是一个具有多列和多行的表。 我有一个包含 JSON 数据的 URL (由后端团队提供)。 现在,我必须从该 URL 中读取数据并将其显示在 HTML 表的单元格中。

我必须使用一种称为异步调用的方法,以便在表中显示数据库中的最新数据。 我试着跟着他Https://www.youtube.com/watch?v=6mt3r8qn1vy和他如何使用 JSON 文件一样,所以我尝试使用 JSON 文件。 但是,我的日志里没有任何东西,不像他。 我刚接触 javascript,不知道如何使用它。 我知道这样一个基本概念,即我必须循环遍历文件并更改每个单元格的内部 HTML,但是我不能开始。

Html 文件是这样的一行:

句子太长,请短一点 输入类型"文本"名称"数据域""标题"01 / 01 / 2018"01 / 15 / 2018"输入类型"提交"名称""拯救""按钮"/ 表""5"样式"宽度: 100% ; id"表"类"标题"头""标题"id"样式"色彩"标签"th class"电子邮件"th class"标题"标签"名""名称"""转位"""转位""/ th class"标题""转位"""体"""体"样式""","色彩"元素"td / td / td"t d"t d"

文件是:

函数 setup (){ loadJSON ("example.json",gotData) ; } function gotData (data){ console.log (data) ; }

Json 文件是:

[{"email":"Abhinav@musiio. com","name":"Abhinav","position":"software eng"}]

我基本上想从后端团队提供给我的 URL 中捕获 JSON 数据。 但目前,我试图在 example.JSON 文件的 HTML 行中显示 JSON 数据。

1 个回复 | 最后更新于 7 天前
7 天前   #1

首先,你应该使用"thead"的复数及本体而不是两行不同的类在你的本体

我给你一个简单的例子,你可以做类似的事情:

让 data [{"email":"Abhinav@musiio. com","name":"Abhinav","position":"software eng"} ,] ; 让 htmlString; for (let row of data){ htmlString'tr'; htmlString +'td ${ row.email } / td'; htmlString +'td ${ row.name } / td'; string +'td ${ row.position } / td'; string +'td ${ row.position } / td'; string +'/ html'tr'; } document.getelementid ('body rows')。 内置 html html html 字符串;
这些信息将被用来填充 javascript--------------------------------------------------------------------------------

登录后方可回帖

Loading...