合并 HTML 与 Json

Question

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

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

这是我保存为 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 中提取“测试”、'A City'、“我正在做的测试”，然后使用 HTML 显示它。但是，它应该全部存在于一个文档中。预先感谢您查看我的问题！

Answer 1

以下是对我有用的方法。

<!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>

合并 HTML 与 Json

Combining HTML with Json

html

json

template-literals