将json解析为html表

时间:2014-11-11 01:30:49

标签: html json parsing

我尝试使用此代码将我的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 (&euro;)</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

自动创建表我该怎么办?

1 个答案:

答案 0 :(得分:0)

我不确定评论的内容,但我猜这是问题所在。 JSON文件是一个包含名为&#34; entry&#34;的数组的对象。三层下来。您的代码需要一个数组,但您需要为它提供一个对象。摆脱该行使JSON文件成为一个合适的数组。

而不是这个

$("#templateRiga").tmpl(informazioni).appendTo("#prodotti");

试试这个

$("#templateRiga").tmpl(informazioni.dreamlo.leaderboard.entry).appendTo("#prodotti");