3

我正在尝试使用 JSON 文件构建表。我想要一张表，其中列出了一些神奇宝贝（JSON 文件中列出的神奇宝贝）。我是 .js 的新手

这是 JSON 文件（我只添加了两个神奇宝贝）：

{
"n001": {
    "nome": "Bulbasaur",
    "altrinomi": ["Fushigidane", "フシギダネ", "Bulbizarre", "Bisasam", "이상해씨"],
    "numero": [80, null, null],
    "genere": [87.5, 12.5],
    "tipo": ["Erba", "Veleno"],
    "classificazione": "Seme",
    "altezza": "0.7m",
    "peso": "6.9kg",
    "cattura": 45,
    "passiuova": 5120,
    "abilità": ["Erbaiuto"],
    "abilitànascosta": "Clorofilla",
    "esperienza": 1059860,
    "felicitàbase": 70,
    "PAguadagnati": [0, 0, 0, 1, 0, 0],
    "lottaaerea": false,
    "gruppouova": ["Mostro", "Erba"],
    "statsbase": [45, 49, 49, 45, 65, 65]
},
"n002": {
    "nome": "Ivysaur",
    "altrinomi": ["Fushigisou", "フシギソウ", "Herbizarre", "Bisaknosp", "이상해풀"],
    "numero": [81, null, null],
    "genere": [87.5, 12.5],
    "tipo": ["Erba", "Veleno"],
    "classificazione": "Seme",
    "altezza": "1.0m",
    "peso": "13.0kg",
    "cattura": 45,
    "passiuova": 5120,
    "abilità": ["Erbaiuto"],
    "abilitànascosta": "Clorofilla",
    "esperienza": 1059860,
    "felicitàbase": 70,
    "PAguadagnati": [0, 1, 0, 0, 1, 0],
    "lottaaerea": false,
    "gruppouova": ["Mostro", "Erba"],
    "statsbase": [60, 62, 63, 80, 80, 60]
}

}

这是带有 javascript 的 html 页面，用于在内部构建表格：

<html lang="it">
<head>
    <title>Pokédex XY - Uxie Dex</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../_styles/styles.css">
    <script type="text/javascript" src="../_js/jquery-2.0.3.min.js"></script>
</head>
<body>
    <div class="container pad">
        <div><!-- Kalos Centrale -->
            <p>Kalos Centrale</p>
            <table class="list" id="dexlist61"></table>
        </div>
        <div><!-- Kalos Costiera -->
            <p>Kalos Costiera</p>
            <table class="list" id="dexlist62"></table>
        </div>
        <div><!-- Kalos Montana -->
            <p>Kalos Montana</p>
            <table class="list" id="dexlist63"></table>
        </div>
        <div><!-- Nazionale -->
            <p>Nazionale</p>
            <table class="list" id="dexlist6"></table>
        </div>
    </div>
    <div class="header">
        <p>
            <a href="../pokedex-xy">Pokédex</a>
            <a href="../movedex-xy">Movedex</a>
            <a href="../abilitydex-xy">Abilitydex</a>
            <a href="../routedex-xy">Routedex</a>
            <a href="../calcolatore">Calcolatore</a>
            <a href="../faq" class="h">FAQ</a>
        </p>
    </div>
    <script type="text/javascript">
        $.getJSON("database/pokemon.json", function(pokemon) {
            dexlist61_str="";
            dexlist61_str+="<thead><tr><th>No.</th><th></th><th>Nome</th><th>Tipo</th></thead><tbody>";
            // sort items
            var sortedPokemon = sortDex();
            // table body
            for(var i=0;i<sortedPokemon.length;i++) {
                dexlist61_str+="<tr><td>"+i+"</td><td>"+pokemon[sortedPokemon].nome+"</td></tr>";
            }
            dexlist61_str+="</tbody>";
            document.getElementById("dexlist61").innerHTML=dexlist61_str;
            // scrivi una lista dei pokémon appartenenti al dato dex
            function sortDex() {
                // sort pokemon corresponding to central Kalos number
                var sortedPokemonArr = new Array();
                for(var i=0;i<pokemon.length;i++) {
                    if(!isInDex(sortedPokemonArr, pokemon[i].numero[0]))
                        sortedPokemonArr[i] = pokemon[i].numero[0];
                }
                sortedPokemonArr = sortedPokemonArr.sort(function(a,b){return a-b});
                // sort pokemon of central Kalos
                var sortedPokemon = new Array();
                for(var i=0;i<sortedPokemonArr.length;i++) {
                    for(var j=0;j<pokemon.length;j++) {
                        if(pokemon[j].numero[0] == sortedPokemonArr[i]) {
                            sortedPokemon[i] = j;
                        }
                    }
                }
                return sortedPokemon;
            }
            // appartiene al dex che sto elencando?
            function isInDex(arr, elem) {
                for(var i=0;i<arr.length;i++) {
                    if(arr[i] == elem)
                        return true;
                }
                return false;
            }
        });
    </script>
</body>

我尝试使用这种功能来做到这一点：https ://sites.google.com/site/conciseexamples/javascript-examples/json-examples/json-to-table

我认为我所做的是：

  • 检查神奇宝贝是否有一个中心卡洛斯数（数组 pokemon[i].numero 的第一个值）
  • 如果 Pokémon 有一个中心 Kalos 编号，则将该编号添加到数组 sortedPokemonArr
  • 对数组进行数字排序（口袋妖怪从 1 到 151）
  • 对于 151 只口袋妖怪中的每一个，存储它们的国家编号
  • 写一个表格，其中第一列是从 1 到 151 的数字列表，第二列是按中心 kalos 数字排序的神奇宝贝列表。

有人能告诉我哪些是我的错误吗？XD 对不起这个问题，我知道它需要很多时间才能阅读它 XD

先谢谢了

4

1 回答 1

3

如果我理解正确，您想过滤掉没有中央卡洛斯号的口袋妖怪，按照它们的中央卡洛斯号对它们进行排序并显示它们？

演示

var rows = document.createDocumentFragment();

Object.keys(pokemons).map(function (k) {
    return pokemons[k];
}).filter(function (pokemon) {
    return pokemon.numero[0] !== null;
}).sort(function (a, b) {
    return a.numero[0] - b.numero[0];
}).forEach(function (pokemon, i) {
    var tr = document.createElement('tr'),
        indexCell = document.createElement('td'),
        kalosCell = document.createElement('td'),
        nameCell = document.createElement('td');

    indexCell.innerHTML = ++i;
    kalosCell.innerHTML = pokemon.numero[0];
    nameCell.innerHTML = pokemon.nome;

    [indexCell, kalosCell, nameCell].forEach(tr.appendChild.bind(tr));

    rows.appendChild(tr);            
});

document.querySelector('table > tbody').appendChild(rows);

或用于创建单元格的稍微不同的方法：

var createTd = document.createElement.bind(document, 'td');

//...
.forEach(function (pokemon, i) {
    var tr = document.createElement('tr');

    [
        [createTd(), ++i],
        [createTd(), pokemon.numero[0]],
        [createTd(), pokemon.nome]
    ].forEach(function (items) {
        var td = items[0];

        td.innerHTML = items[1];
        tr.appendChild(td);
    });

    rows.appendChild(tr);          
});
于 2013-11-09T23:42:01.160 回答