如何获取 Parse Json 数据 jQuery 每个？

Question

I have these data (vertical) inside my database that categorized based on column 'P_CATEGORY' .

I managed to display the data inside each jQuery. Here's my jQuery script. But how to set the "p_date1 = value['P_DATE']" specific for column P_CATEGORY = 'FERY1' inside each?

file.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>

And here's my php file to fetch the data

file.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);
?>

Because in my HTML file i need to display it in horizontal interface.

HTML file as give:

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>

Appreciate if someone can help me to solve this problem.

Thanks.

Answer 1

i dont 100% get your question but in javascript if you do that

value.p_date = "date";

that will create a new attribute inside object value if not exist if exist it will change it -obviously- so here is an example with a random json objects which have a boolean called completed if it is true i add an new attribue to value if not then not...!

$(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);

            });
        });
});