在前端开发中，我们经常需要从页面中获取数据。而有时候，这些数据可能会以JSON格式存储在HTML文档中的脚本标记内。那么如何通过JavaScript来读取这些数据呢？本文将为您介绍详细的步骤和示例代码。
步骤
- 获取脚本标记
首先，我们需要通过DOM API获取包含JSON数据的脚本标记。可以使用document.getElementsByTagName()方法获取所有脚本标记，再根据其type属性值是否为"application/json"来确定包含JSON数据的脚本标记。
-- -------------------- ---- -------
----- ------- - ---------------------------------------
--- ----------
--- ---- - - -- - - --------------- ---- -
-- ---------------- --- ------------------- -
---------- - ----------
-----
-
-- 读取JSON数据
接下来，我们可以通过获取到的脚本标记的innerHTML属性来获取其中的JSON数据。由于innerHTML返回的是字符串类型，我们需要使用JSON.parse()方法将其转换成JSON对象。
const jsonData = JSON.parse(dataScript.innerHTML)
- 使用JSON数据
现在我们已经成功地将JSON数据存储在了jsonData变量中，可以随意使用它。以下是一个简单的示例，将JSON数据渲染到页面上。
const nameEl = document.getElementById('name')
const ageEl = document.getElementById('age')
const genderEl = document.getElementById('gender')
nameEl.innerText = jsonData.name
ageEl.innerText = jsonData.age
genderEl.innerText = jsonData.gender示例代码
HTML文档中的脚本标记：
<script type="application/json" id="data">
{
"name": "张三",
"age": 25,
"gender": "男"
}
</script>JavaScript代码：
-- -------------------- ---- -------
----- ------- - ---------------------------------------
--- ----------
--- ---- - - -- - - --------------- ---- -
-- ---------------- --- ------------------- -
---------- - ----------
-----
-
-
----- -------- - --------------------------------
----- ------ - -------------------------------
----- ----- - ------------------------------
----- -------- - ---------------------------------
---------------- - -------------
--------------- - ------------
------------------ - ---------------总结
通过以上步骤，我们可以轻松地从JavaScript中读取脚本标记中的JSON数据，并使用它进行页面渲染等操作。希望通过本文，您可以更好地理解如何在前端开发中处理JSON数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14290