我正在尝试使用 JSON 文件构建一个表.这有什么问题
I'm trying to build a table with a JSON file. What's wrong with this?
我正在尝试用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
我认为我所做的是:
- 检查神奇宝贝是否有中央卡洛斯编号(数组口袋妖怪[i].numero的第一个值)
- 如果神奇宝贝有一个中央 Kalos 编号,请将该数字添加到排序的数组中口袋妖怪Arr
- 按数字对数组进行排序(口袋妖怪从 1 到 151)
- 对于 151 个口袋妖怪中的每一个,存储它们的全国编号
- 写一个表格,其中第一个列是从 1 到 151 的数字列表,第二个列是用中央 Kalos 数字排序的神奇宝贝列表。
有人能告诉我哪些是我的错误吗?鑫达对不起这个问题,我知道只需要很多时间才能阅读 XD
提前致谢:D
如果我
理解正确,您想过滤掉没有中央卡洛斯编号的口袋妖怪,将它们按中央卡洛斯编号排序并显示它们?
演示
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);
});
相关文章:
- 火狐中的多个问题,但在 chrome 中工作正常,没有一个问题
- 是否从超时内开始间隔是一个问题
- java脚本我需要帮助来解决一个问题
- Dreaded 100%边栏高度-jQuery修复,但另一个问题出现了
- I'我在用JavaScript进行验证时遇到了一个问题
- Jstree-Can't在AJAX调用中选中复选框,适用于经典调用.一个问题
- 我在角度指令和角度路由中有一个问题
- 我有一个问题,使用 Javascript 或 Jquery 创建具有字符串计数的动态字段
- 如何在测验应用中移动到下一个或上一个问题
- 如何创建按钮转到测验软件中的下一个问题
- 我对用php代码创建的HTML有一个问题
- 我想使用fbi . event .subscribe记录跟踪值在Facebook喜欢按钮,但遇到了一个问题
- 如果效率是一个问题,如何修改JavaScript修剪函数?
- 一个问题与大量的图像-广告画廊插件
- 新的局部变量在大的FOR循环,这是一个问题
- 我在放大分形(webgl)时遇到了一个问题
- jQuery对话框的一个问题
- 在javascript中,通过一个对象数组为每个对象发出一个问题
- 浏览器渲染网页的顺序是什么,为什么脚本阻塞是一个问题
- 闭包编译器外部解决了一个问题,但我不明白为什么