在HTML表

时间：2017-01-09 13:41:34

标签： html json multidimensional-array

我有一个JSON文件加载到HTML表中，现在我有一个多维json文件。我发现了一个虚拟JSON文件来测试它，我在下面制作了片段。它加载数据但它错过了嵌套中的某些行。

＆＃13;
＆＃13; 
//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.
});        
                
  
   });


});
＆＃13; 
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 {
	padding: 0 1em;
	max-width: 900px;
	margin: 0 auto;
}

.ac-custom h2 {
	font-size: 1em;
	font-weight: 300;
	padding: 0 0 0.5em;
	margin: 0 0 30px;
	color:#0d3852;
}

.ac-custom ul,
.ac-custom ol {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 800px;
}

.ac-custom li {
	margin: 0 auto;
	/*padding: 0.5em 0;*/
	position: relative;
}

.ac-custom label {
	display: inline-block;
	position: relative;
	font-size: 1em;
	padding: 0 0 0 80px;
	vertical-align: top;
	color: #0d3852;
	cursor: pointer;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

/*
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
	width: 20px;
	height: 20px;
	top: 50%;
	left: 0;
	margin-top: -12px;
	position: absolute;
	cursor: pointer;
}*/

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
	opacity: 0;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	z-index: 100;
}

/*
.ac-custom label::before {
	content: '';
	border: 1px solid #0d3852;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}*/

.ac-radio label::before {
	border-radius: 50%;
}

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
	color: #fff;
} 

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
	opacity: 0.8;
}

/* General SVG and path styles */

.ac-custom svg {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	margin-top: -12px;
	left: 0px;
	pointer-events: none;
}

.ac-custom svg path {
	stroke: #0d3852;
	stroke-width: 13px;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

/* Specific input, SVG and path styles */

/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
	width: 30px;
	height: 30px;
	margin-top: -15px;
	left: 10px;
	position: absolute;
}

.ac-circle label::before {
	background-color: #fff;
	border: none;
}

.ac-circle svg {
	width: 70px;
	height: 70px;
	margin-top: -35px;
	left: -10px;
}

.ac-circle svg path {
	stroke-width: 5px;
} 

/* Box Fill */
.ac-boxfill svg path {
	stroke-width: 8px;
} 

/* Swirl */
.ac-swirl svg path {
	stroke-width: 8px;
}

/* List */
.ac-list ol {
	list-style: decimal;
	list-style-position: inside;
}

.ac-list ol li {
	font-size: 2em;
	padding: 1em 1em 0 2em;
	text-indent: -40px;
}

.ac-list ol li label {
	font-size: 0.5em;
	text-indent: 0;
	padding-left: 30px;
}

.ac-list label::before {
	display: none;
}

.ac-list svg {
	width: 100%;
	height: 80px;
	left: 0;
	top: 1.2em;
	margin-top: 0px;
}

.ac-list svg path {
	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 {
	background-color:#2cc3ce;
 }
 
 .filter-columns-alt {
	background-color:#78D9E0;
	min-height:256px;
 }

ul,li { 
	margin:0; 
	padding:0; 
	list-style:none;
}

.label {
 	color:#000;
 	font-size:16px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

正如您所看到的，在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），但它错过了第一行（stoiximan，1.91）

1 个答案:

答案 0 :(得分：0)





    //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) {
  dlen = val.outcomes.length;
 
 for(i = 0; i < dlen; i++ ){
      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);
 }

    // $('table').append(tr);
  });


    });


    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 {
    	padding: 0 1em;
    	max-width: 900px;
    	margin: 0 auto;
    }

    .ac-custom h2 {
    	font-size: 1em;
    	font-weight: 300;
    	padding: 0 0 0.5em;
    	margin: 0 0 30px;
    	color:#0d3852;
    }

    .ac-custom ul,
    .ac-custom ol {
    	list-style: none;
    	padding: 0;
    	margin: 0 auto;
    	max-width: 800px;
    }

    .ac-custom li {
    	margin: 0 auto;
    	/*padding: 0.5em 0;*/
    	position: relative;
    }

    .ac-custom label {
    	display: inline-block;
    	position: relative;
    	font-size: 1em;
    	padding: 0 0 0 80px;
    	vertical-align: top;
    	color: #0d3852;
    	cursor: pointer;
    	-webkit-transition: color 0.3s;
    	transition: color 0.3s;
    }

    /*
    .ac-custom input[type="checkbox"],
    .ac-custom input[type="radio"],
    .ac-custom label::before {
    	width: 20px;
    	height: 20px;
    	top: 50%;
    	left: 0;
    	margin-top: -12px;
    	position: absolute;
    	cursor: pointer;
    }*/

    .ac-custom input[type="checkbox"],
    .ac-custom input[type="radio"] {
    	opacity: 0;
    	-webkit-appearance: none;
    	display: inline-block;
    	vertical-align: middle;
    	z-index: 100;
    }

    /*
    .ac-custom label::before {
    	content: '';
    	border: 1px solid #0d3852;
    	-webkit-transition: opacity 0.3s;
    	transition: opacity 0.3s;
    }*/

    .ac-radio label::before {
    	border-radius: 50%;
    }

    .ac-custom input[type="checkbox"]:checked + label,
    .ac-custom input[type="radio"]:checked + label {
    	color: #fff;
    } 

    .ac-custom input[type="checkbox"]:checked + label::before,
    .ac-custom input[type="radio"]:checked + label::before {
    	opacity: 0.8;
    }

    /* General SVG and path styles */

    .ac-custom svg {
    	position: absolute;
    	width: 20px;
    	height: 20px;
    	top: 50%;
    	margin-top: -12px;
    	left: 0px;
    	pointer-events: none;
    }

    .ac-custom svg path {
    	stroke: #0d3852;
    	stroke-width: 13px;
    	stroke-linecap: round;
    	stroke-linejoin: round;
    	fill: none;
    }

    /* Specific input, SVG and path styles */

    /* Circle */
    .ac-circle input[type="checkbox"],
    .ac-circle input[type="radio"],
    .ac-circle label::before {
    	width: 30px;
    	height: 30px;
    	margin-top: -15px;
    	left: 10px;
    	position: absolute;
    }

    .ac-circle label::before {
    	background-color: #fff;
    	border: none;
    }

    .ac-circle svg {
    	width: 70px;
    	height: 70px;
    	margin-top: -35px;
    	left: -10px;
    }

    .ac-circle svg path {
    	stroke-width: 5px;
    } 

    /* Box Fill */
    .ac-boxfill svg path {
    	stroke-width: 8px;
    } 

    /* Swirl */
    .ac-swirl svg path {
    	stroke-width: 8px;
    }

    /* List */
    .ac-list ol {
    	list-style: decimal;
    	list-style-position: inside;
    }

    .ac-list ol li {
    	font-size: 2em;
    	padding: 1em 1em 0 2em;
    	text-indent: -40px;
    }

    .ac-list ol li label {
    	font-size: 0.5em;
    	text-indent: 0;
    	padding-left: 30px;
    }

    .ac-list label::before {
    	display: none;
    }

    .ac-list svg {
    	width: 100%;
    	height: 80px;
    	left: 0;
    	top: 1.2em;
    	margin-top: 0px;
    }

    .ac-list svg path {
    	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 {
    	background-color:#2cc3ce;
     }
     
     .filter-columns-alt {
    	background-color:#78D9E0;
    	min-height:256px;
     }

    ul,li { 
    	margin:0; 
    	padding:0; 
    	list-style:none;
    }

    .label {
     	color:#000;
     	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>
相关问题
最新问题