关于html：使用纯JavaScript加载外部JSON数据


Load external JSON data with pure JavaScript

我正在尝试一个javascript挑战，但遇到了严重的问题。要求不修改除app.js和无库(即无jquery等)以外的任何其他文件。

以下是文件系统：

1
2
3
4
5
6
7
8
9
10
11
12
13
css
  bootstrap.min.css
image
  1.gif
  2.gif
  3.gif
  4.gif
  5.gif
js
  app.js
json
  data.js
sample.html

以下是sample.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
Sample
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

  Only Pure JavaScript
 
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Image</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
 

<script src="json/data.js">
<script src="js/app.js">
</body>
</html>

这里是data.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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中看到的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var jsonFile ="json/data.js";
var len = sample_data.length;
// document.write('len: ' + len +"");

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 +"");

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

    td = document.createElement('td');
    document.write('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');
    document.write('price: ' + s.price +"");
    td.innerHTML = s.price;
    tr.appendChild(td);

    body.appendChild(tr);
}

table.appendChild(body);

我花了这么多时间，尝试了4种不同的方法，这个方法是我能得到的最接近的(它正确地显示了与document.write)。说真的，没有任何库或HTML页面的更改，这对我来说是很困难的。我们将非常感谢您在哪里寻找信息。记住，只有app.js可以为此更改。

相关讨论

data.js是javascript，不是JSON。要加载它，请创建一个指向它的元素。

线后：

1
var jsonFile ="json/data.js";

放线：

1
document.write('<scr' + 'ipt src="' + jsonFile + '">');
相关讨论

你真的需要document.write吗？如果您只需要用于调试目的，请用一个简单的console.log替换它。

而且，看起来您并没有在任何地方附加table元素。在app.js的末尾加上document.body.appendChild(table)。

然而，从您的sample.html中，我可以看到您已经有了一个现有的tbody元素，因此您很可能希望将这些值添加到现有的表中。

而不是做

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

您可以使用

var body = document.getElementsByTagName('tbody')[0]

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var jsonFile ="json/data.js";
var len = sample_data.length;
// document.write('len: ' + len +"");

var body = document.getElementsByTagName('tbody')[0];


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

    //console.log('id: ' + s.id);

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

    td = document.createElement('td');
    //console.log('name: ' + s.name);
    td.innerHTML = s.name;
    tr.appendChild(td);

    td = document.createElement('td');
    //console.log('thumbnailUrl: ' + s.thumbnailUrl);
    td.innerHTML = s.thumbnailUrl;
    tr.appendChild(td);

    td = document.createElement('td');
    //console.log('price: ' + s.price);
    td.innerHTML = s.price;
    tr.appendChild(td);

    body.appendChild(tr);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
Sample
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

  Only Pure JavaScript
 
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Image</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
 


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
  },
]

<script src="js/app.js">
</body>
</html>

相关讨论