如何从 JSON 文件读入 JavaScript？ [复制]答案

【问题标题】：How do I read into JavaScript from JSON file? [duplicate]如何从 JSON 文件读入 JavaScript？ [复制]
【发布时间】：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 文件

标签： javascript json

【解决方案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"
            }
        ]
    }
}

这对我有用

【讨论】：