在html中使用JSON文件

Question

我很难理解如何使用保存在JSON文件中的数据并将其加载到html页面中。

    { 

    "level1":{
        "level1_1":{
            "example": "test",
            "example2":"123123"
        },
        "level1_2":{
            "example": "test",
            "example2":"123123"
        }
    },

    "level2":{
        "level2_1":{
            "example": "test",
            "example2":"123123"
        },
        "level2_2":{
            "example": "test",
            "example2":"123123"
        }
    }

}

我希望能够从中调用数据，例如在HTML文件中：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>reading json</title>
  <style>

  </style>

</head>
<body>

  <br>
  file value :

  <br>

<script>
function loadJSON(callback) {   

var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
xobj.open('GET', 'config.json', true); // Replace 'my_data' with the path to your file
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);  
}

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

</body>

我从本教程中获得了脚本，但仍然可以运行它。 所以我的目的只是为了查看JSON文件中的** first value **数据。 你知道你们是怎么做到的吗？

Answer 1

这是一个更详尽的答案。

首先，让我们将JSON解析为一个对象。

var actual_JSON = JSON.parse(response);

其次，将JSON对象转换为可读的字符串。

var json_string = JSON.stringify(actual_JSON, undefined, 2);

然后，使用querySelector()函数选择一个DOM元素。 请注意， #output表示我想选择一个名为output的ID属性。

var output = document.querySelector("#output");

然后，我使用JSON innerHTML属性将JSON字符串添加到DOM中。 它将在“文件值”之后添加。

output.innerHTML += json_string;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>reading json</title>
  <style>

  </style>

</head>
<body>

  <br>
  <div id="output">file value : </div>
  <br>

<script>

// Starts.
init();

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");
  xobj.open('GET', 'config.json', true); // Replace 'my_data' with the path to your file
  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);
          // init(xobj.responseText)
        }
  };
  xobj.send(null);  
}

function init() {
  loadJSON(function(response) {

    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);

    // Transforms the JSON object into a readable string.
    var json_string = JSON.stringify(actual_JSON, undefined, 2);

    // Select <br> tag.
    var output = document.querySelector("#output");

    // Adds it to the DOM.
    output.innerHTML += json_string;
  });
}

</script>
</body>

Answer 2

您必须在html中添加一些id属性，然后根据该id选择并循环json数据并像这样插入

<!doctype html>

    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>reading json</title>
      <style>

      </style>

    </head>
    <body>

    <div id="json_result"></div>
<script>
function loadJSON(callback) {   

var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
xobj.open('GET', 'config.json', true); // Replace 'my_data' with the path to your file
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);  
}

function init() {

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

    for (var key in actual_JSON) {
        var innerkey = actual_JSON[key];
        for (var inner in innerkey) {
             document.getElementById('json_result').innerHTML += 'Example: '+innerkey[inner]['example']+'<br>';
             document.getElementById('json_result').innerHTML += 'Example2: '+innerkey[inner]['example2']+'<br>';
        }   
    }   
 }); 
}
init();
</script>

</body>

Answer 3

这个堆栈溢出问题将很好地指导您

在html中使用JSON文件

问题描述

3 个解决方案

解决方案1
2 2019-07-25 11:45:04

解决方案2
1 已采纳 2019-07-25 12:17:36

解决方案3
1 2019-07-25 12:36:27

在html中使用JSON文件

问题描述

3 个解决方案

解决方案1 2 2019-07-25 11:45:04

解决方案2 1 已采纳 2019-07-25 12:17:36

解决方案3 1 2019-07-25 12:36:27

解决方案1
2 2019-07-25 11:45:04

解决方案2
1 已采纳 2019-07-25 12:17:36

解决方案3
1 2019-07-25 12:36:27