Load external JSON data with pure JavaScript
我正在尝试一个javascript挑战,但遇到了严重的问题。要求不修改除
以下是文件系统:
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种不同的方法,这个方法是我能得到的最接近的(它正确地显示了与
线后:
1 | var jsonFile ="json/data.js"; |
放线:
1 | document.write('<scr' + 'ipt src="' + jsonFile + '">'); |
你真的需要
而且,看起来您并没有在任何地方附加
然而,从您的
而不是做
您可以使用
此时,您可以完全删除
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> |