0
JSONファイルをHTMLテーブルにロードして、多次元jsonファイルを作成しました。私はそれをテストするためのダミーのJSONファイルを見つけました。私は以下のスニペットを作成しました。データをロードしますが、ネスト内のいくつかの行が欠けています。多次元jsonファイルをHTMLテーブルにロード
//It loads the data from the JSON file
$(function() {
var data = [{ "name" : "Άντερλεχτ - Σιντ Τρούιντεν(GG/NG)", "outcomes" : [{ "name" : "No goal", "bookie" : "stoiximan", "odds" : 1.91, "stakes" : 53.5279805353 }, { "name" : "Goal", "bookie" : "betrebels", "odds" : 2.2, "stakes" : 46.4720194647 }], "profit" : 2.23844282238 },
{ "name" : "Παρί Σεν Ζερμέν - Μπαρτσελόνα", "outcomes" : [{ "name" : "Παρί Σεν Ζερμέν (1)", "bookie" : "interwetten", "odds" : 4.1, "stakes" : 24.7827486321 }, { "name" : "X", "bookie" : "interwetten", "odds" : 3.5, "stakes" : 29.0312198262 }, { "name" : "Μπαρτσελόνα (2)", "bookie" : "betrebels", "odds" : 2.2, "stakes" : 46.1860315417 }], "profit" : 1.6092693917 }
];
var tr;
$.each(data, function(key, val) {
$.each(data, function(i, object) {
$.each(object, function(property, value) {
tr = $('<tr/>');
tr.append('<td class="name" rel="' + val.name + '">' + val.name + '</td>');
tr.append('<td class="bet" rel="' + val.outcomes[i].name + '">' + val.outcomes[i].name + '</td>');
tr.append('<td class="bookie" rel="' + val.outcomes[i].bookie + '">' + val.outcomes[i].bookie + '</td>');
tr.append('<td class="metric2" >' + val.outcomes[i].odds + '</td>');
});
$('table').append(tr); // moved this here to handle overwriting.
});
});
});h1{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 300;
text-align: center;
margin-bottom: 15px;
}
table{
width:100%;
table-layout: fixed;
}
.tbl-header{
background-color: rgba(255,255,255,0.3);
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
td{
padding: 10px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
}
tr:nth-child(odd) td {
background:#2cc3ce;
color:#0d3852;
}
/* demo styles */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
background: #0d3852;
font-family: 'Roboto', sans-serif;
}
section{
margin: 50px;
}
input {
max-width:50px;
text-align: left;
border: 1px solid #aaa;
background-color: #fff;
padding: 5px 20px 5px 5px;
margin-top: 1px;
font-size: 13px;
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ac-custom {
\t padding: 0 1em;
\t max-width: 900px;
\t margin: 0 auto;
}
.ac-custom h2 {
\t font-size: 1em;
\t font-weight: 300;
\t padding: 0 0 0.5em;
\t margin: 0 0 30px;
\t color:#0d3852;
}
.ac-custom ul,
.ac-custom ol {
\t list-style: none;
\t padding: 0;
\t margin: 0 auto;
\t max-width: 800px;
}
.ac-custom li {
\t margin: 0 auto;
\t /*padding: 0.5em 0;*/
\t position: relative;
}
.ac-custom label {
\t display: inline-block;
\t position: relative;
\t font-size: 1em;
\t padding: 0 0 0 80px;
\t vertical-align: top;
\t color: #0d3852;
\t cursor: pointer;
\t -webkit-transition: color 0.3s;
\t transition: color 0.3s;
}
/*
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
\t width: 20px;
\t height: 20px;
\t top: 50%;
\t left: 0;
\t margin-top: -12px;
\t position: absolute;
\t cursor: pointer;
}*/
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
\t opacity: 0;
\t -webkit-appearance: none;
\t display: inline-block;
\t vertical-align: middle;
\t z-index: 100;
}
/*
.ac-custom label::before {
\t content: '';
\t border: 1px solid #0d3852;
\t -webkit-transition: opacity 0.3s;
\t transition: opacity 0.3s;
}*/
.ac-radio label::before {
\t border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
\t color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
\t opacity: 0.8;
}
/* General SVG and path styles */
.ac-custom svg {
\t position: absolute;
\t width: 20px;
\t height: 20px;
\t top: 50%;
\t margin-top: -12px;
\t left: 0px;
\t pointer-events: none;
}
.ac-custom svg path {
\t stroke: #0d3852;
\t stroke-width: 13px;
\t stroke-linecap: round;
\t stroke-linejoin: round;
\t fill: none;
}
/* Specific input, SVG and path styles */
/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
\t width: 30px;
\t height: 30px;
\t margin-top: -15px;
\t left: 10px;
\t position: absolute;
}
.ac-circle label::before {
\t background-color: #fff;
\t border: none;
}
.ac-circle svg {
\t width: 70px;
\t height: 70px;
\t margin-top: -35px;
\t left: -10px;
}
.ac-circle svg path {
\t stroke-width: 5px;
}
/* Box Fill */
.ac-boxfill svg path {
\t stroke-width: 8px;
}
/* Swirl */
.ac-swirl svg path {
\t stroke-width: 8px;
}
/* List */
.ac-list ol {
\t list-style: decimal;
\t list-style-position: inside;
}
.ac-list ol li {
\t font-size: 2em;
\t padding: 1em 1em 0 2em;
\t text-indent: -40px;
}
.ac-list ol li label {
\t font-size: 0.5em;
\t text-indent: 0;
\t padding-left: 30px;
}
.ac-list label::before {
\t display: none;
}
.ac-list svg {
\t width: 100%;
\t height: 80px;
\t left: 0;
\t top: 1.2em;
\t margin-top: 0px;
}
.ac-list svg path {
\t stroke-width: 4px;
}
.row {
margin-left: -15px;
margin-right: -15px;
margin-top:0;
}
.col-sm-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.col-sm-4 {
float: left;
}
.col-sm-4 {
width: 33.33333333%;
}
.filter-columns {
\t background-color:#2cc3ce;
}
.filter-columns-alt {
\t background-color:#78D9E0;
\t min-height:256px;
}
ul,li {
\t margin:0;
\t padding:0;
\t list-style:none;
}
.label {
\t color:#000;
\t font-size:16px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="body">
<table>
<thead>
<tr id="ProductID" class="first">
<th>NAME</th>
<th>BET</th>
<th>BOOKIE</th>
<th>ODDS</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>あなたはJSONのこの部分では、見ることができるように：
"outcomes" : [{ "name" : "No goal", "bookie" : "stoiximan", "odds" : 1.91, "stakes" : 53.5279805353 }, { "name" : "Goal", "bookie" : "betrebels", "odds" : 2.2, "stakes" : 46.4720194647 }]
それが最後の行（betrebels、2.2）からのデータを示しているが、それは最初の行を外します（stiximan、1.91）
このスニペットの位置付けは、$（ 'table'）。append（tr） ; 'いくつかの値を上書きする原因となっていたので、問題を解決するために3番目のループに移動しました。 –
私もそれを動かしていました。しかし、場合によっては3つの巣があり、2つではありません。そして、それは最後のものを欠いている（3つがある場合）。 –
いくつかの修正 –