html 嵌套json

在 HTML 中嵌套 JSON 数据是常见的做法，可以通过使用自定义的 data 属性来实现。你可以在 HTML 元素上添加一个名为 "data-" 前缀的属性，并将 JSON 数据作为属性值进行存储。然后，通过 JavaScript 代码来解析这些属性值，从而获取嵌套的 JSON 数据。

以下是一个示例，展示了如何在 HTML 中嵌套 JSON 数据：

<div id="myDiv" data-json='{ "name": "John", "age": 30, "city": "New York" }'></div>

在上述示例中，我们在一个 `<div>` 元素上添加了一个名为 "data-json" 的自定义属性，并将 JSON 数据作为属性值进行存储。

然后，可以使用 JavaScript 来解析这个自定义属性，并获取嵌套的 JSON 数据：

var divElement = document.getElementById("myDiv");
var jsonData = JSON.parse(divElement.getAttribute("data-json"));

console.log(jsonData.name); // 输出 "John"
console.log(jsonData.age); // 输出 30
console.log(jsonData.city); // 输出 "New York"

在上述 JavaScript 代码中，我们首先使用 `getElementById` 方法获取包含 JSON 数据的 `<div>` 元素。然后，使用 `getAttribute` 方法获取名为 "data-json" 的自定义属性的值，并使用 `JSON.parse` 方法将其解析为 JavaScript 对象。接下来，我们可以通过访问对象的属性来获取嵌套的 JSON 数据。

请注意，在实际应用中，你可能需要根据具体的需求和数据结构来设计自定义属性的名称和嵌套的 JSON 数据结构。此外，还可以使用其他的 JavaScript 库或框架（如 jQuery）来更方便地处理和操作嵌套的 JSON 数据。