我尝试使用此代码将我的json文件解析为html页面 html`
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Template html che utilizzeremo via Javascript -->
<script id="templateRiga" type="text/x-jquery-tmpl">
<tr>
<td>${name}</td>
<td>${score}</td>
</tr>
</script>
<!-- Tutti gli elementi racchiusi dentro ${} verrano sostituiti con il valore della variabile che rappresentano (caricata dal file JSON) -->
</head>
<body>
<!-- Contenitore elastico -->
<div class="container">
<!-- Definisco una nuova riga -->
<div class="row">
<h3 class="span12">Un tutorial a cura di <a href="http://www.moebiusmania.net">MoebiusMania.net</a></h3>
<h1 class="span12">Tabelle dinamiche e interattive</h1>
<!--
bordered-table: tabella con bordi interni ed esterni
zebra-striped: colorazione alternata ed effetto al mouseover
-->
<div id="tabella" class="span12">
<table id="prodotti" class="table table-bordered table-striped">
<!-- testata tabella -->
<thead>
<th>Nome</th>
<th>Quantita'</th>
<th>Prezzo (€)</th>
</thead>
<!-- corpo tabella -->
<tbody>
</tbody>
</table>
</div>
</div> <!-- fine spiegazione -->
</div> <!-- fine riga (row) -->
</div> <!-- fine contenitore -->
</body>
<!-- jQuery -->
<script type="text/javascript" src="script/jquery-2.0.3.min.js"></script>
<!-- plugins Tmpl e TableSorter -->
<script type="text/javascript" src="script/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="script/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
// Caricamento completato documento
$(document).ready(caricamento);
function caricamento(){
// Chiamata Ajax per caricare il file JSON con i prodotti
$.getJSON("dati/prodotti.json",creaTabella);
}
function creaTabella(informazioni){
// Inserisco il template con i dati esterni nella tabella
$("#templateRiga").tmpl(informazioni).appendTo("#prodotti");
// Rendo la tabella ordinabile
$("#prodotti").tablesorter();
}
</script>
和这个json文件
{
"dreamlo": {
"leaderboard": {
"entry": [{
"name": "oliwier",
"score": "258021",
"seconds": "0",
"text": null,
"date": "7/26/2014 12:18:57 PM"
}, {
"name": "ден",
"score": "257947",
"seconds": "0",
"text": null,
"date": "7/24/2014 1:44:26 AM"
}, {
"name": "ijijjjjijjijoooijij",
"score": "233120",
"seconds": "0",
"text": null,
"date": "10/20/2014 3:08:53 PM"
}, {
"name": "اريد+هاذا+المستوا",
"score": "225081",
"seconds": "0",
"text": null,
"date": "7/14/2014 11:40:13 AM"
}, {
"name": "Yafdlkahsjs",
"score": "221760",
"seconds": "0",
"text": null,
"date": "10/17/2014 10:18:40 AM"
}, {
"name": "prova",
"score": "210919",
"seconds": "0",
"text": null,
"date": "6/25/2014 3:56:09 PM"
}, {
"name": "rodri",
"score": "158120",
"seconds": "0",
"text": null,
"date": "8/27/2014 9:23:34 PM"
}, {
"name": "щагешп66",
"score": "152100",
"seconds": "0",
"text": null,
"date": "7/31/2014 9:06:47 PM"
}, {
"name": "jose",
"score": "149601",
"seconds": "0",
"text": null,
"date": "8/26/2014 2:51:44 PM"
}, {
"name": "jesus",
"score": "148963",
"seconds": "0",
"text": null,
"date": "9/13/2014 6:16:04 PM"
}, {
"name": "othon",
"score": "147042",
"seconds": "0",
"text": null,
"date": "8/10/2014 1:10:38 PM"
}, {
"name": "dfvfgs",
"score": "145439",
"seconds": "0",
"text": null,
"date": "9/5/2014 2:38:16 PM"
}, {
"name": "linda",
"score": "145163",
"seconds": "0",
"text": null,
"date": "7/15/2014 2:56:48 PM"
}, {
"name": "ENZO",
"score": "143966",
"seconds": "0",
"text": null,
"date": "9/3/2014 6:45:34 PM"
}, {
"name": "jham+04",
"score": "139788",
"seconds": "0",
"text": null,
"date": "9/7/2014 8:41:28 AM"
}, {
"name": "Lukas",
"score": "138563",
"seconds": "0",
"text": null,
"date": "9/14/2014 4:39:39 PM"
}, {
"name": "calvin+cindy",
"score": "138320",
"seconds": "0",
"text": null,
"date": "7/26/2014 9:32:34 AM"
}, {
"name": "jojo",
"score": "138224",
"seconds": "0",
"text": null,
"date": "11/6/2014 6:04:19 AM"
}, {
"name": "서현웅",
"score": "132100",
"seconds": "0",
"text": null,
"date": "8/9/2014 7:14:59 AM"
}, {
"name": "copetti+filippo",
"score": "131247",
"seconds": "0",
"text": null,
"date": "10/22/2014 4:29:03 PM"
}, {
"name": "David",
"score": "129419",
"seconds": "0",
"text": null,
"date": "9/2/2014 1:11:04 PM"
}, {
"name": "ужвжвжжвжвжв",
"score": "129361",
"seconds": "0",
"text": null,
"date": "10/4/2014 5:07:44 PM"
}, {
"name": "Deandre",
"score": "127704",
"seconds": "0",
"text": null,
"date": "9/13/2014 11:32:46 PM"
}, {
"name": "Mio+Caro",
"score": "127660",
"seconds": "0",
"text": null,
"date": "8/26/2014 10:24:51 PM"
}, {
"name": "ivan",
"score": "127599",
"seconds": "0",
"text": null,
"date": "10/5/2014 4:48:02 PM"
}, {
"name": "seba",
"score": "127523",
"seconds": "0",
"text": null,
"date": "9/1/2014 8:14:20 AM"
}, {
"name": "rj",
"score": "127424",
"seconds": "0",
"text": null,
"date": "8/25/2014 9:57:19 AM"
}, {
"name": "jorge",
"score": "126827",
"seconds": "0",
"text": null,
"date": "8/2/2014 8:40:16 PM"
}, {
"name": "meka",
"score": "125285",
"seconds": "0",
"text": null,
"date": "8/10/2014 10:23:26 AM"
}, {
"name": "นัด",
"score": "125028",
"seconds": "0",
"text": null,
"date": "11/9/2014 12:31:04 AM"
}, {
"name": "Lucas",
"score": "121646",
"seconds": "0",
"text": null,
"date": "10/6/2014 10:13:34 PM"
}, {
"name": "Josiah",
"score": "121602",
"seconds": "0",
"text": null,
"date": "9/24/2014 11:04:06 PM"
}, {
"name": "hatty",
"score": "120109",
"seconds": "0",
"text": null,
"date": "10/30/2014 7:33:45 AM"
}, {
"name": "axeo",
"score": "118722",
"seconds": "0",
"text": null,
"date": "10/21/2014 8:51:10 AM"
}, {
"name": "LUC",
"score": "118664",
"seconds": "0",
"text": null,
"date": "9/4/2014 6:08:56 AM"
}, {
"name": "CHON",
"score": "118647",
"seconds": "0",
"text": null,
"date": "8/3/2014 3:23:42 AM"
}, {
"name": "paul",
"score": "118624",
"seconds": "0",
"text": null,
"date": "9/22/2014 8:27:21 PM"
}, {
"name": "amari",
"score": "118623",
"seconds": "0",
"text": null,
"date": "9/6/2014 1:11:25 AM"
}, {
"name": "car",
"score": "118224",
"seconds": "0",
"text": null,
"date": "8/13/2014 8:32:07 AM"
}, {
"name": "al",
"score": "117840",
"seconds": "0",
"text": null,
"date": "9/26/2014 4:29:29 PM"
}, {
"name": "Uncle+We+We",
"score": "117564",
"seconds": "0",
"text": null,
"date": "9/17/2014 6:15:21 AM"
}, {
"name": "pisellone",
"score": "117488",
"seconds": "0",
"text": null,
"date": "7/27/2014 3:08:06 PM"
}, {
"name": "миг",
"score": "117208",
"seconds": "0",
"text": null,
"date": "10/26/2014 12:32:16 PM"
}, {
"name": "javier",
"score": "115866",
"seconds": "0",
"text": null,
"date": "9/2/2014 2:57:01 PM"
}, {
"name": "zjnzjzsjjsjdjd",
"score": "115519",
"seconds": "0",
"text": null,
"date": "9/13/2014 6:15:53 PM"
}, {
"name": "tyreese.+dorrell",
"score": "114966",
"seconds": "0",
"text": null,
"date": "11/7/2014 5:03:50 PM"
}, {
"name": "jordan",
"score": "114306",
"seconds": "0",
"text": null,
"date": "10/27/2014 6:14:06 AM"
}, {
"name": "eduan",
"score": "114266",
"seconds": "0",
"text": null,
"date": "10/5/2014 1:52:14 AM"
}, {
"name": "andres",
"score": "114240",
"seconds": "0",
"text": null,
"date": "8/29/2014 1:04:22 PM"
}, {
"name": "bcg+zg",
"score": "113780",
"seconds": "0",
"text": null,
"date": "8/10/2014 11:13:44 AM"
}, {
"name": "derek",
"score": "113607",
"seconds": "0",
"text": null,
"date": "7/29/2014 1:15:50 AM"
}, {
"name": "Federico",
"score": "113325",
"seconds": "0",
"text": null,
"date": "10/28/2014 4:41:42 PM"
}, {
"name": "喔喔哦喲阿公",
"score": "113002",
"seconds": "0",
"text": null,
"date": "10/26/2014 11:59:19 AM"
}, {
"name": "валера",
"score": "112784",
"seconds": "0",
"text": null,
"date": "8/19/2014 7:40:50 PM"
}, {
"name": "Ben+dragon+stoker",
"score": "112483",
"seconds": "0",
"text": null,
"date": "8/6/2014 12:05:42 PM"
}, {
"name": "sebbe",
"score": "111287",
"seconds": "0",
"text": null,
"date": "9/16/2014 8:18:08 AM"
}, {
"name": "Valerio",
"score": "111279",
"seconds": "0",
"text": null,
"date": "10/3/2014 6:04:21 PM"
}, {
"name": "Bruno",
"score": "111163",
"seconds": "0",
"text": null,
"date": "8/30/2014 8:04:26 PM"
}, {
"name": "suryq",
"score": "110587",
"seconds": "0",
"text": null,
"date": "11/9/2014 9:52:40 AM"
}, {
"name": "niko",
"score": "109961",
"seconds": "0",
"text": null,
"date": "8/31/2014 1:19:35 PM"
}, {
"name": "speed+racer",
"score": "109404",
"seconds": "0",
"text": null,
"date": "9/10/2014 2:04:47 AM"
}, {
"name": "The+Ultimate1",
"score": "109340",
"seconds": "0",
"text": null,
"date": "9/14/2014 5:17:03 PM"
}, {
"name": "xander",
"score": "109267",
"seconds": "0",
"text": null,
"date": "10/27/2014 12:39:53 AM"
}, {
"name": "RER",
"score": "109246",
"seconds": "0",
"text": null,
"date": "10/28/2014 11:20:29 PM"
}, {
"name": "rua",
"score": "109222",
"seconds": "0",
"text": null,
"date": "8/22/2014 4:38:21 AM"
}, {
"name": "matteus03",
"score": "109124",
"seconds": "0",
"text": null,
"date": "8/21/2014 2:48:02 PM"
}, {
"name": "luis",
"score": "108520",
"seconds": "0",
"text": null,
"date": "10/28/2014 2:56:15 PM"
}, {
"name": "Angelisho",
"score": "108239",
"seconds": "0",
"text": null,
"date": "9/27/2014 11:19:53 AM"
}, {
"name": "NUÑO",
"score": "107984",
"seconds": "0",
"text": null,
"date": "10/13/2014 3:54:49 PM"
}, {
"name": "dhd",
"score": "107521",
"seconds": "0",
"text": null,
"date": "8/8/2014 12:18:45 PM"
}, {
"name": "Lee",
"score": "107500",
"seconds": "0",
"text": null,
"date": "9/25/2014 10:55:24 PM"
}, {
"name": "wes",
"score": "106823",
"seconds": "0",
"text": null,
"date": "9/30/2014 3:24:22 PM"
}, {
"name": "ehinar",
"score": "106705",
"seconds": "0",
"text": null,
"date": "9/5/2014 9:35:22 PM"
}, {
"name": "Daniel+Baños",
"score": "106605",
"seconds": "0",
"text": null,
"date": "8/11/2014 3:40:20 AM"
}, {
"name": "tyler",
"score": "106486",
"seconds": "0",
"text": null,
"date": "9/7/2014 7:51:11 AM"
}, {
"name": "kryštof",
"score": "106122",
"seconds": "0",
"text": null,
"date": "8/15/2014 9:48:46 AM"
}, {
"name": "Maqbool",
"score": "106066",
"seconds": "0",
"text": null,
"date": "8/29/2014 6:59:01 PM"
}, {
"name": "mike",
"score": "105446",
"seconds": "0",
"text": null,
"date": "8/13/2014 3:13:05 PM"
}, {
"name": "nico",
"score": "105240",
"seconds": "0",
"text": null,
"date": "8/25/2014 12:36:50 AM"
}, {
"name": "Asto",
"score": "105068",
"seconds": "0",
"text": null,
"date": "8/3/2014 6:42:30 AM"
}, {
"name": "dag",
"score": "104569",
"seconds": "0",
"text": null,
"date": "8/29/2014 12:39:20 AM"
}, {
"name": "Simon",
"score": "104463",
"seconds": "0",
"text": null,
"date": "9/14/2014 8:21:48 AM"
}, {
"name": "hallo",
"score": "104459",
"seconds": "0",
"text": null,
"date": "8/6/2014 6:49:58 PM"
}, {
"name": "mattia08",
"score": "103742",
"seconds": "0",
"text": null,
"date": "10/24/2014 8:49:35 PM"
}, {
"name": "ensar",
"score": "103463",
"seconds": "0",
"text": null,
"date": "9/11/2014 7:21:42 PM"
}, {
"name": "Joshua",
"score": "103343",
"seconds": "0",
"text": null,
"date": "10/6/2014 5:39:42 PM"
}, {
"name": "kmkc",
"score": "103321",
"seconds": "0",
"text": null,
"date": "9/11/2014 8:26:14 PM"
}, {
"name": "simone",
"score": "103288",
"seconds": "0",
"text": null,
"date": "8/16/2014 9:11:37 AM"
}, {
"name": "victor",
"score": "103023",
"seconds": "0",
"text": null,
"date": "9/5/2014 8:53:07 PM"
}, {
"name": "Megamind",
"score": "102939",
"seconds": "0",
"text": null,
"date": "9/5/2014 9:30:50 AM"
}, {
"name": "benne",
"score": "102381",
"seconds": "0",
"text": null,
"date": "10/22/2014 4:51:43 PM"
}, {
"name": "Daniel",
"score": "102246",
"seconds": "0",
"text": null,
"date": "9/18/2014 1:56:02 PM"
}, {
"name": "matt",
"score": "102222",
"seconds": "0",
"text": null,
"date": "8/29/2014 11:06:04 AM"
}, {
"name": "Taylor",
"score": "101808",
"seconds": "0",
"text": null,
"date": "8/21/2014 6:12:57 PM"
}, {
"name": "pedrope",
"score": "101477",
"seconds": "0",
"text": null,
"date": "7/31/2014 9:10:44 PM"
}, {
"name": "Nicolas",
"score": "101460",
"seconds": "0",
"text": null,
"date": "10/13/2014 6:51:37 PM"
}, {
"name": "mecgra",
"score": "101402",
"seconds": "0",
"text": null,
"date": "8/2/2014 2:43:13 PM"
}, {
"name": "XmkXX",
"score": "101350",
"seconds": "0",
"text": null,
"date": "7/31/2014 9:08:56 PM"
}, {
"name": "VSC",
"score": "101326",
"seconds": "0",
"text": null,
"date": "8/27/2014 4:07:07 PM"
}, {
"name": "GALIH",
"score": "101247",
"seconds": "0",
"text": null,
"date": "11/3/2014 11:34:44 AM"
}]
}
}
};
只有从json文件中删除
才能正常工作{"dreamlo":{"leaderboard":{"entry":
因为我必须自动从互联网上获取此文件而且我不能总是下载和修改文件,有人可以帮助我吗?抱歉,我的英文谢谢很多
现在它可以正常工作但是如果文件在我的服务器中但是如果我想使用这个链接
它可以工作http://dreamlo.com/lb/539e43736e51b417407de6ce/json/index.json
自动创建表我该怎么办?
答案 0 :(得分:0)
我不确定评论的内容,但我猜这是问题所在。 JSON文件是一个包含名为&#34; entry&#34;的数组的对象。三层下来。您的代码需要一个数组,但您需要为它提供一个对象。摆脱该行使JSON文件成为一个合适的数组。
而不是这个
$("#templateRiga").tmpl(informazioni).appendTo("#prodotti");
试试这个
$("#templateRiga").tmpl(informazioni.dreamlo.leaderboard.entry).appendTo("#prodotti");