时间戳

首页 > 解决方案 > 将 HTML 与 Json 相结合

html - 将 HTML 与 Json 相结合

问题描述

我正在尝试创建一个嵌入了 JSON 数据的 HTML 文件。然后，该文件可以使用 JSON 数据创建 HTML，例如表格等。

我已经尝试过模板文字，但我不确定我是否做得正确或我错过了什么。这是我第一次这样做，所以我不知道如何进行。

这是我保存为 sample.html 的基本示例

const person = {
name: 'Test',
job: 'A job',
city: 'a city',
bio: 'What a test that I'm doing!'
}

// 然后创建我们的标记：

const markup = `
 <div class="person">
<h2>
    ${person.name}
</h2>
<p class="location">${person.location}</p>
<p class="bio">${person.bio}</p>
 </div>`;

当我查看结果时，我只看到 JSON 字符串和文字 ${person.name} 而不是 JSON 字符串中的数据。我希望它从 Json 中提取'Test'、'A City'、'What a test that I'm doing'，然后使用 HTML 显示它。但是，它应该全部存在于一个文档中。提前感谢您查看我的问题！

标签： htmljsontemplate-literals

解决方案

以下是对我有用的。 

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
var text = '{"person":[' +
'{"name":"Test","job":"a job", "city":"a city", "bio": "What a test that I am doing" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.person[0].name + " " + obj.person[0].bio;
</script>

推荐阅读