[英]How to fetch Parse Json data jQuery each?
我的數據庫中有這些數據(垂直) ,這些數據基於列'P_CATEGORY'進行分類。
我設法在每個 jQuery 中顯示數據。 這是我的 jQuery 腳本。 但是如何在每個內部設置特定於列 P_CATEGORY = 'FERY1' 的“p_date1 = value['P_DATE']”?
文件.js
<script>
$(document).ready(function(){
$.get("file.php")
.done(function (data) {
var displayString1 = "";
var displayString2 = "";
var displayString3 ="";
var displayString4 = "";
var p_date1, p_date2, p_date3, p_date4, p_date5 = "";
var sales1, sales2, sales3, sales4, sales5 = "";
var gross1, gross2, gross3, gross4, gross5 = "";
var nett1, nett2, nett3, nett4, nett5 = "";
$.each(JSON.parse(data), function (key, value) {
// FERY1
p_date1 = value['P_DATE']; // How to set this value for P_CATEGOR FERY1 ?
sales1 = value['P_SALES'];
gross1 = value['P_GROSS'];
nett1 = value['P_PROFIT'];
// FERY2
p_date2 = value['P_DATE']; // How to set this value for P_CATEGOR FERY2 ?
sales2 = value['P_SALES'];
gross2 = value['P_GROSS'];
nett2 = value['P_PROFIT'];
// FERY3
p_date3 = value['P_DATE']; // How to set this value for P_CATEGOR FERY3 ?
sales3 = value['P_SALES'];
gross3 = value['P_GROSS'];
nett3 = value['P_PROFIT'];
// CURY1
p_date4 = value['P_DATE'];
sales4 = value['P_SALES'];
gross4 = value['P_GROSS'];
nett4 = value['P_PROFIT'];
// CURY2
p_date5 = value['P_DATE'];
sales5 = value['P_SALES'];
gross5 = value['P_GROSS'];
nett5 = value['P_PROFIT'];
});
displayString1 +=
"<tr style='background-color:#eaeaea;'>" +
"<td>Date</td>" +
"<td>" + p_date1 + "</td>" +
"<td>" + p_date2 + "</td>" +
"<td>" + p_date3 + "</td>" +
"<td>" + p_date4 + "</td>" +
"<td>" + p_date5 + "</td>" +
"</tr>";
displayString2 +=
"<tr style='background-color:#eaeaea;'>" +
"<td>Date</td>" +
"<td>" + sales1 + "</td>" +
"<td>" + sales2 + "</td>" +
"<td>" + sales3 + "</td>" +
"<td>" + sales4 + "</td>" +
"<td>" + sales5 + "</td>" +
"</tr>";
displayString3 +=
"<tr style='background-color:#eaeaea;'>" +
"<td>Date</td>" +
"<td>" + gross1 + "</td>" +
"<td>" + gross2 + "</td>" +
"<td>" + gross3 + "</td>" +
"<td>" + gross4 + "</td>" +
"<td>" + gross5 + "</td>" +
"</tr>";
displayString4 +=
"<tr style='background-color:#eaeaea;'>" +
"<td>Date</td>" +
"<td>" + nett1 + "</td>" +
"<td>" + nett2 + "</td>" +
"<td>" + nett3 + "</td>" +
"<td>" + nett4 + "</td>" +
"<td>" + nett5 + "</td>" +
"</tr>";
$('#fTableBody1').css("display", "none");
$("#tableBody1").html(displayString1);
$('#fTableBody2').css("display", "none");
$("#tableBody2").html(displayString2);
$('#fTableBody3').css("display", "none");
$("#tableBody3").html(displayString3);
$('#fTableBody4').css("display", "none");
$("#tableBody4").html(displayString4);
$("#table-display").dataTable({
dom: 'Blfrtip',
scrollX: true,
"ordering": false,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});
});
</script>
這是我的 php 文件來獲取數據
文件.php
<?php
require 'connection.php';
$query = "SELECT *
FROM TABLE ORDER BY ID ASC";
$result = oci_parse($conn, $query);
oci_execute($result);
$arr = array();
while ($row = oci_fetch_array($result)){
$arr[] = $row;
}
echo json_encode($arr);
?>
因為在我的 HTML 文件中,我需要在水平界面中顯示它。
HTML 文件如下:
html.html
<html>
<div class="row">
<!-- Table -->
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>TABLE<small> </small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<form id='form-display' action="" method="POST">
<table id="table-display" class="table table-striped table-bordered" style="width:100%;">
<thead style="background-color:#598BAF; color:#ffffff;">
<tr>
<th>Subjet</th>
<th>FERY1</th>
<th>FERY2</th>
<th>FERY3</th>
<th>CURY1</th>
<th>CURY2</th>
</tr>
</thead>
<tbody id="tableBody1">
<div style="position:absolute;top:50%;left:42%;" id="fTableBody1">
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</tbody>
<tbody id="tableBody2">
<div style="position:absolute;top:50%;left:42%;" id="fTableBody2">
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</tbody>
<tbody id="tableBody3">
<div style="position:absolute;top:50%;left:42%;" id="fTableBody3">
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</tbody>
<tbody id="tableBody4">
<div style="position:absolute;top:50%;left:42%;" id="fTableBody4">
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</tbody>
</table>
</form>
</div>
</div>
</div>
<!-- Table -->
</div>
</html>
感謝有人可以幫助我解決這個問題。
謝謝。
我沒有 100% 得到你的問題,但如果你這樣做,在 javascript
value.p_date = "date";
這將在 object 值中創建一個新屬性,如果不存在,如果存在,它將改變它 - 顯然 - 所以這里是一個隨機 json 對象的例子,它有一個 boolean 對象,如果不是真的,則添加新的 itribue 值完成然后不……!
$(document).ready(function () {
jQuery.get("https://jsonplaceholder.typicode.com/todos/")
.done(function (data) {
$.each(data, function (key, value) {
if (value['completed']) {
value.p_date = new Date();
}
});
$.each(data, function (key, value) { //for testing only
if (value['completed']) {
value.p_date = new Date();
}
console.log(key);
console.log(value);
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.