使用纯JavaScript加载外部JSON数据_Javascript_Html_Json

使用纯JavaScript加载外部JSON数据

javascript html json

使用纯JavaScript加载外部JSON数据,javascript,html,json,Javascript,Html,Json,我正在尝试JavaScript挑战，但遇到了严重的问题。要求不修改除app.js和无库（即无JQuery等）之外的任何其他文件以下是文件系统： css bootstrap.min.css image 1.gif 2.gif 3.gif 4.gif 5.gif js app.js json data.js sample.html <!doctype> <html> <head> <meta charset="UTF-8"

我正在尝试JavaScript挑战，但遇到了严重的问题。要求不修改除app.js和无库（即无JQuery等）之外的任何其他文件

以下是文件系统：

css
  bootstrap.min.css
image
  1.gif
  2.gif
  3.gif
  4.gif
  5.gif
js
  app.js
json
  data.js
sample.html

<!doctype>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Only Pure JavaScript</h2>
  <div class="contents">
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Image</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
<script src="json/data.js"></script>
<script src="js/app.js"></script>
</body>
</html>

var sample_data = [
  {
    "id": "5",
    "name": "name #5",
    "thumbnailUrl": "image/5.gif",
    "price": 170
  },
  {
    "id": "1",
    "name": "name #1",
    "thumbnailUrl": "image/1.gif",
    "price": 170
  },
  {
    "id": "2",
    "name": "name #2",
    "thumbnailUrl": "image/2.gif",
    "price": 270
  },
  {
    "id": "8",
    "name": "name #8",
    "thumbnailUrl": "image/8.gif",
    "price": 70
  },
  {
    "id": "10",
    "name": "name #10",
    "thumbnailUrl": "image/10.gif",
    "price": 170
  },
]

以下是sample.html：

css
  bootstrap.min.css
image
  1.gif
  2.gif
  3.gif
  4.gif
  5.gif
js
  app.js
json
  data.js
sample.html

<!doctype>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Only Pure JavaScript</h2>
  <div class="contents">
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Image</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
<script src="json/data.js"></script>
<script src="js/app.js"></script>
</body>
</html>

var sample_data = [
  {
    "id": "5",
    "name": "name #5",
    "thumbnailUrl": "image/5.gif",
    "price": 170
  },
  {
    "id": "1",
    "name": "name #1",
    "thumbnailUrl": "image/1.gif",
    "price": 170
  },
  {
    "id": "2",
    "name": "name #2",
    "thumbnailUrl": "image/2.gif",
    "price": 270
  },
  {
    "id": "8",
    "name": "name #8",
    "thumbnailUrl": "image/8.gif",
    "price": 70
  },
  {
    "id": "10",
    "name": "name #10",
    "thumbnailUrl": "image/10.gif",
    "price": 170
  },
]

这就是我目前在app.js中看到的：

var jsonFile = "json/data.js";
var len = sample_data.length;
// document.write('len: ' + len + "<br>");

var table = document.createElement('table');
var body = document.createElement('tbody');


for (var i = 0; i < len; i++) {
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var s = sample_data[i];

    document.write('id: ' + s.id + "<br>");

    td.innerHTML = s.id;
    tr.appendChild(td);

    td = document.createElement('td');
    document.write('name: ' + s.name + "<br>");
    td.innerHTML = s.name;
    tr.appendChild(td);

    td = document.createElement('td');
    document.write('thumbnailUrl: ' + s.thumbnailUrl + "<br>");
    td.innerHTML = s.thumbnailUrl;
    tr.appendChild(td);

    td = document.createElement('td');
    document.write('price: ' + s.price + "<br>");
    td.innerHTML = s.price;
    tr.appendChild(td);

    body.appendChild(tr);
}

table.appendChild(body);

var jsonFile=“json/data.js”；
var len=样本数据长度；
//文件。写（'len:'+len+“
”）；
var table=document.createElement（'table'）；
var body=document.createElement（'tbody'）；
对于（变量i=0；i”）；
td.innerHTML=s.id；
tr.appendChild（td）；
td=document.createElement（'td'）；
文件。写入（'name:'+s.name+“
”）；
td.innerHTML=s.name；
tr.appendChild（td）；
td=document.createElement（'td'）；
document.write（'thumbnailUrl:'+s.thumbnailUrl+“
”）；
td.innerHTML=s.thumbnailUrl；
tr.appendChild（td）；
td=document.createElement（'td'）；
文件。写入（'price:'+s.price+“
”）；
td.innerHTML=s.price；
tr.appendChild（td）；
附肢儿童（tr）；
}
表2.儿童（身体）；

我花了这么多时间，尝试了4种不同的方法，附件中的这一种是我能得到的最接近的方法（它通过

document.write正确显示）。说真的，如果html页面没有任何库或更改，这对我来说很难。我们将非常感谢您提供的任何帮助或指导信息。请记住，只有app.js可以为此进行更改。
您真的需要文档。编写？如果您仅出于调试目的而需要，请将其替换为简单的控制台.log

此外，看起来您并没有将表元素添加到任何地方。
在app.js
的末尾添加document.body.appendChild（表）

但是，从您的sample.html
中，我可以看到您已经有了一个现有的TBODY元素，因此您很可能希望将值添加到该现有表中
而不是做
var body=document.createElement（'tbody'）
可以使用引用现有图元
var body=document.getElementsByTagName（'tbody'）[0]

此时，您可以完全删除表
变量

var jsonFile=“json/data.js”；
var len=样本数据长度；
//文件。写（'len:'+len+“
”）；
var body=document.getElementsByTagName（'tbody'）[0]；
对于（变量i=0；i


样品
只有纯JavaScript
身份证件
形象
名称
价格
变量样本数据=[
{
“id”：“5”，
“姓名”：“姓名#5”，
“thumbnailUrl”：“image/5.gif”，
“价格”：170
},
{
“id”：“1”，
“姓名”：“姓名#1”，
“thumbnailUrl”：“image/1.gif”，
“价格”：170
},
{
“id”：“2”，
“姓名”：“姓名#2”，
“thumbnailUrl”：“image/2.gif”，
“价格”：270
},
{
“id”：“8”，
“姓名”：“姓名#8”，
“thumbnailUrl”：“image/8.gif”，
“价格”：70
},
{
“id”：“10”，
“姓名”：“姓名#10”，
“thumbnailUrl”：“image/10.gif”，
“价格”：170
},
]
您真的需要文档。编写？如果您仅出于调试目的而需要，请将其替换为简单的控制台.log

此外，看起来您并没有将表元素添加到任何地方。
在app.js
的末尾添加document.body.appendChild（表）

但是，从您的sample.html
中，我可以看到您已经有了一个现有的TBODY元素，因此您很可能希望将值添加到该现有表中
而不是做
var body=document.createElement（'tbody'）
可以使用引用现有图元
var body=document.getElementsByTagName（'tbody'）[0]

此时，您可以完全删除表
变量

var jsonFile=“json/data.js”；
var len=样本数据长度；
//文件。写（'len:'+len+“
”）；
var body=document.getElementsByTagName（'tbody'）[0]；
对于（变量i=0；i


样品
只有纯JavaScript
身份证件
形象
名称
价格
变量样本数据=[
{
“id”：“5”，
“姓名”：“姓名#5”，
“thumbnailUrl”：“image/5.gif”，
“价格”：170
},
{