Question

我正在尝试解析一个外部JSON文件，然后使用javascript对其进行解析，但是我遇到了未捕获的引用错误。

我首先在html中声明.json文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script type="text/javascript" src="OnebusinessDataFormat_yelp.json"></script>
    <title>title</title>
  </head>
  <body>


    <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">Dropdown</button>
          <div id="myDropdown" class="dropdown-content">
            <a onclick="name()">NAME</a>
            <a onclick="address()">ADDRESS</a>
            <a onclick="bh()">BUSINESS HOURS</a>
            <a onclick="menu()">MENU</a>
            <a onclick="saf()">SERVICES and FEATURES</a>
          </div>
    </div>

    <div id="name">
        <p id="rest_name"></p>
    </div>
  </body>
</html>

然后我尝试用我的JavaScript代码解析该文件：

var jsonFile = JSON.parse(OnebusinessDataFormat_yelp.json);
function name(){
    document.getElementById("rest_name").innerHTML = jsonFile.name;
}

但是当我从下拉列表中选择名称时，它不会用餐厅名称填充<p>元素。

Answer 1

如果要获取文件的内容，则需要在香草JS中使用Fetch API：

var jsonFile;
fetch("JOnebusinessDataFormat_yelp.json")
    .then(res => res.json())
    .then(data => jsonFile = JSON.parse(data));

也请注意这一行：

<script type="text/javascript" src="OnebusinessDataFormat_yelp.json"></script>

将无法正常工作，因为<script>标记内没有JSON文件-JSON是JavaScript对象符号（字符串），并且是一种比对象更简单的存储JavaScript对象的方式。您只能在.js标记中包含一个<script>文件。

Answer 2

我将向您解释它是如何工作的，希望它可以帮助您思考。

JavaScript有两种类型，服务器和客户端。

如果您的JavaScript在Node.js（服务器）上运行，那么您只需要require()。

const json = require(jsonFilePath);

require()将自动解析JSON（.json扩展文件）并为您生成JavaScript对象。

如果JavaScript在浏览器（客户端）中运行，则无法从用户文件系统打开文件。只需想象一下Javascript是否可以从用户文件系统中打开所需的任何文件。我们所有的数据都将在Facebook数据中心的Description中。

因此，出于明显的安全原因，您将无法（作为浏览器应用程序）从用户文件系统中打开所需的任何文件。但是您将能够打开用户提供的文件，例如<input type="file" />或以自己的方式创建文件，而其他人已经回答了，您可以选择对您的应用有意义的任何解决方案。

Answer 3

使用此

function loadJSON(callback) {   

        var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
        xobj.open('GET', 'OnebusinessDataFormat_yelp.json', true); 
        xobj.onreadystatechange = function () {
              if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
              }
        };
        xobj.send(null);  
     }

上面的函数将创建XMLHttpRequest的新实例，并异步加载OnebusinessDataFormat_yelp.json的内容。我已经使用异步方法了，但是如果想要同步加载，可以将参数更改为false。幸运的是，所有现代浏览器都支持本机JSON.parse方法。还记得我们的匿名回调吗？这是您的用法。

function init() {
 loadJSON(function(response) {
  // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });
}

有关更多详细信息，请参考-https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript

Answer 4

您可以使用此代码在javascript中获取本地json文件。

使用此URL以获得更多参考。 $.getJSON Reference

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in console
});

在javascript中解析外部json文件

4 个答案: