如何从 JSON 文件读入 JavaScript？ [复制]
Posted
技术标签:
【中文标题】如何从 JSON 文件读入 JavaScript？ [复制]【英文标题】：How do I read into JavaScript from JSON file? [duplicate] 【发布时间】：2021-10-23 10:42:27 【问题描述】：如何将 JSON 文件中的信息读入 javascript，以便可以将该值显示到 html 页面中？
在 if 语句和 item.innerHTML 行中都没有从 JSON 文件中获取数据。
我从 JSON 文件中读取了动物的值，然后 if 语句将信息打印到 HTML 文件中
let animals = JSON.parse(animals);
for(let i = 0; i < animals.length; i++)
if(animals.dogs[i].dogId === dog[i])
item.innerHTML += "<li>" + animals.dogs[i].dogName + "</li>";
JSON 文件中的数据如下所示：
"animals":
"dogs": [
"dogId": "DW-001",
"dogName": "Fido",
"dogType": "Poodle",
"dogType": "Small",
"description": "Excellant lap dog, doesn't shed.",
"pricePerHour": "3.0"
]
【问题讨论】：
你不能像这样使用 HTML/JS 读取磁盘上的文件。 在 Web 中工作时，您始终需要知道代码在哪里执行。您正在从某处的服务器编写该 Javascript，但它在其浏览器某处的客户端计算机上执行。该计算机无权访问您的服务器。如果您希望包含 JSON，则必须将其添加到服务器端的 Javascript 中。 数组dog未定义 @Musafiroon 是，我没有包含整个 JavaScript 文件 【参考方案1】：在您的情况下，最简单的解决方案是将 JSON 文本作为变量添加到您的 JavaScript 中
let animalData = '''
"animals":
"dogs": [
"dogId": "DW-001",
"dogName": "Fido",
"dogType": "Poodle",
"dogType": "Small",
"description": "Excellant lap dog, doesnt shed.",
"pricePerHour": "3.0"
]
'''
【讨论】：
我想这样做，但规范明确指出我无法编辑 JSON 文件【参考方案2】：如果您有两个文件分别是 index.html 和 animals.json 然后
您可以使用 `fetch API 来读取文件
即。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div id="item"></div>
<script>
var item = document.querySelector('#item');
var animals;
var dog = ["DW-001"]
fetch("./animals.json")
.then(x => x.text())
.then(y =>
animals = JSON.parse(y.replaceAll(/(\r|\n|\s)/g, "")).animals;
console.log('hello')
for (let i = 0; i < animals.dogs.length; i++)
if (animals.dogs[i].dogId === dog[i])
item.innerHTML += "<li>" + animals.dogs[i].dogName + "</li>";
);
</script>
</body>
</html>
animals.json -- 没有对您的原始文件进行任何更改
"animals":
"dogs": [
"dogId": "DW-001",
"dogName": "Fido",
"dogType": "Poodle",
"dogType": "Small",
"description": "Excellantlapdog,doesntshed.",
"pricePerHour": "3.0"
]
这对我有用
【讨论】：
以上是关于如何从 JSON 文件读入 JavaScript？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何使用简单的 JSON 库将 json 文件读入 java
带有 JSON 格式字符串的文件，如何将文件内容读入 NSDictionary