Как отобразить данные JSON в виде данных с использованием JavaScript - код PHP работает, но не уверен, как преобразовать в JavaScript - PullRequest
0 голосов
/ 11 мая 2019

JSON Данные не отображаются в виде заголовка с заголовками столбцов ColTitle, строка для «Начального баланса», а затем строка с ColData.

PHP-код работает нормально, но это новое приложение на основе JavaScript, над которым я работаю.

Это код JavaScript, в котором я пытался отобразить таблицу

Mycontacts на самом деле является живым ответом JSON, но для целей тестирования я поставил его здесь.

<script type="text/javascript">
var myContacts = [
{
  "Header": {
    "Time": "2019-05-10T10:38:08-07:00",
    "ReportName": "GeneralLedger",
    "ReportBasis": "Accrual",
    "StartPeriod": "2019-02-01",
    "EndPeriod": "2019-02-01",
    "Currency": "GBP",
    "Option": [
      {
        "Name": "NoReportData",
        "Value": "false"
      }
    ]
  },
  "Columns": {
    "Column": [
      {
        "ColTitle": "Date",
        "ColType": "Date",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "tx_date"
          }
        ]
      },
      {
        "ColTitle": "Transaction Type",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "txn_type"
          }
        ]
      },
      {
        "ColTitle": "No.",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "doc_num"
          }
        ]
      },
      {
        "ColTitle": "Name",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "name"
          }
        ]
      },
      {
        "ColTitle": "Customer",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "cust_name"
          }
        ]
      },
      {
        "ColTitle": "Supplier",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "vend_name"
          }
        ]
      },
      {
        "ColTitle": "Employee",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "emp_name"
          }
        ]
      },
      {
        "ColTitle": "Class",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "klass_name"
          }
        ]
      },
      {
        "ColTitle": "Product/Service",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "item_name"
          }
        ]
      },
      {
        "ColTitle": "Memo/Description",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "memo"
          }
        ]
      },
      {
        "ColTitle": "Account",
        "ColType": "String",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "account_name"
          }
        ]
      },
      {
        "ColTitle": "Debit",
        "ColType": "Money",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "debt_home_amt"
          }
        ]
      },
      {
        "ColTitle": "Credit",
        "ColType": "Money",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "credit_home_amt"
          }
        ]
      },
      {
        "ColTitle": "Amount",
        "ColType": "Money",
        "MetaData": [
          {
            "Name": "ColKey",
            "Value": "subt_nat_home_amount"
          }
        ]
      }
    ]
  },
  "Rows": {
    "Row": [
      {
        "Header": {
          "ColData": [
            {
              "value": "1000 Bootcamp AMEX Acc",
              "id": "134"
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            }
          ]
        },
        "Rows": {
          "Row": [
            {
              "ColData": [
                {
                  "value": "Beginning Balance"
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                },
                {
                  "value": ""
                }
              ],
              "type": "Data"
            }
          ]
        },
        "Summary": {
          "ColData": [
            {
              "value": "Total for 1000 Bootcamp AMEX Acc"
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            },
            {
              "value": ""
            }
          ]
        },
        "type": "Section"
      },
      }
    ]
  }

    ];

function generateDynamicTable(){

        var noOfContacts = myContacts.length;

        if(noOfContacts>0){


            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");
            table.style.width = '50%';
            table.setAttribute('border', '1');
            table.setAttribute('cellspacing', '0');
            table.setAttribute('cellpadding', '5');

            // retrieve column header ('Name', 'Email', and 'Mobile')

            var col = []; // define an empty array
            for (var i = 0; i < noOfContacts; i++) {
                for (var key in myContacts[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }

            // CREATE TABLE HEAD .
            var tHead = document.createElement("thead");    


            // CREATE ROW FOR TABLE HEAD .
            var hRow = document.createElement("tr");

            // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
            for (var i = 0; i < col.length; i++) {
                    var th = document.createElement("th");
                    th.innerHTML = col[i];
                    hRow.appendChild(th);
            }
            tHead.appendChild(hRow);
            table.appendChild(tHead);

            // CREATE TABLE BODY .
            var tBody = document.createElement("tbody");    

            // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
            for (var i = 0; i < noOfContacts; i++) {

                    var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD .


                    for (var j = 0; j < col.length; j++) {
                        var td = document.createElement("td");
                        td.innerHTML = myContacts[i][col[j]];
                        bRow.appendChild(td);
                    }
                    tBody.appendChild(bRow)

            }
            table.appendChild(tBody);   


            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("myContacts");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);

        }   
    }

</script>

Таким образом, в приведенном выше примере я ожидал, что в первой строке таблицы будут заголовки столбцов, затем строка для ColData - «значение»: «1000 Bootcamp AMEX Acc», затем строка для ColData - «значение»: «Beginning Balance », затем, наконец, строка для ColData -« value »:« Итого за 1000 Bootcamp AMEX Acc ».

Это всего лишь пример - мои живые данные намного больше, чем это, поэтому для каждого цикла необходим циклстолбцов, строк, строк, резюме.

При использовании SDK

echo "Report Name - " . $report['Header']['ReportName'];
            echo "<br>";
            echo "For Date: " . $report['Header']['DateMacro'] . " (".$report['Header']['StartPeriod']." - ".$report['Header']['EndPeriod'].")";
            echo "<br>";            
            echo "Currency: " . $report['Header']['Currency'];
            echo "<br>";
            echo "<hr>";
            echo '<table><thead>';

            $NumberColumns = array();
            echo '<th></th>';
            // echo '<th>Account Name</th>';
            $NumberColumns[]= ''; // get a foreach for number of cols if we need it
            foreach ($report['Columns']['Column'] as $HeadKey => $columns) {
                $NumberColumns[]= '';
                echo '<th>';
                echo $columns['ColTitle'];
                if($columns['ColTitle'] == 'Credit') {
                    $CreditKey = $HeadKey;
                }
                echo '</th>';
            }
            echo '</thead><tbody>';


            foreach($report['Rows']['Row'] as $MainRow) {
                echo '<tr style="background-color:lightgrey">';
                echo '<td><h3>' . $MainRow['Header']['ColData']['0']['value'] . '</h3></td>'; // SPLITTER ROW - SUMMARY
                foreach ($MainRow['Summary']['ColData'] as $MainRowData) {
                    if ($counter++ == 0) continue;
                    echo '<td>' . $MainRowData['value'] . '</td>';
                }
                unset($counter);
                echo '</tr>';
                foreach($MainRow['Rows']['Row'] as $DetailRow) {
                    echo '<td></td>';
                    echo '</td>';
                    foreach($DetailRow['ColData'] as $DetailKey => $CellDetail) {
                        $CellContents = $CellDetail['value'];
                        if($DetailKey == $CreditKey) {
                            $CellContents = abs($CellDetail['value']) * -1;
                        }
                        echo '<td>' . $CellContents . '</td>';
                    }
                    echo '</tr>';
                }
            } // Main ROW
            echo '</tbody></table>';

приведенная ниже кодировка PHP работала нормально.

1 Ответ

0 голосов
/ 11 мая 2019
  1. Некоторые скобки перепутаны или отсутствуют в объекте myContacts Rows. См. Комментарии в примере кода.

  2. Элемент div с идентификатором «myContacts», в котором вы хотите отобразить таблицу, не был определен в вашей HTML-разметке. Вот часть, где вы это называете:

var divContainer = document.getElementById("myContacts");
  1. вы определили свою функцию рендеринга, но забыли вызвать ее изначально:
generateDynamicTable() // TODO: call was missing at the end of your script

ДОПОЛНИТЕЛЬНО: Таким образом, вы можете использовать что-то подобное для отладки, чтобы получить правильное значение:)

td.innerHTML = myContacts[i][col[j]]; // instead of this
td.innerHTML = JSON.stringify(myContacts[ i ][ col[ j ] ]); // use this

Надеюсь, я смогу помочь:)

Скрипка: https://jsfiddle.net/0xsf8qmg/

Вот код:

var myContacts = [
    {
        "Header": {
            "Time": "2019-05-10T10:38:08-07:00",
            "ReportName": "GeneralLedger",
            "ReportBasis": "Accrual",
            "StartPeriod": "2019-02-01",
            "EndPeriod": "2019-02-01",
            "Currency": "GBP",
            "Option": [
                {
                    "Name": "NoReportData",
                    "Value": "false"
                }
            ]
        },
        "Columns": {
            "Column": [
                {
                    "ColTitle": "Date",
                    "ColType": "Date",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "tx_date"
                        }
                    ]
                },
                {
                    "ColTitle": "Transaction Type",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "txn_type"
                        }
                    ]
                },
                {
                    "ColTitle": "No.",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "doc_num"
                        }
                    ]
                },
                {
                    "ColTitle": "Name",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "name"
                        }
                    ]
                },
                {
                    "ColTitle": "Customer",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "cust_name"
                        }
                    ]
                },
                {
                    "ColTitle": "Supplier",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "vend_name"
                        }
                    ]
                },
                {
                    "ColTitle": "Employee",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "emp_name"
                        }
                    ]
                },
                {
                    "ColTitle": "Class",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "klass_name"
                        }
                    ]
                },
                {
                    "ColTitle": "Product/Service",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "item_name"
                        }
                    ]
                },
                {
                    "ColTitle": "Memo/Description",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "memo"
                        }
                    ]
                },
                {
                    "ColTitle": "Account",
                    "ColType": "String",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "account_name"
                        }
                    ]
                },
                {
                    "ColTitle": "Debit",
                    "ColType": "Money",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "debt_home_amt"
                        }
                    ]
                },
                {
                    "ColTitle": "Credit",
                    "ColType": "Money",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "credit_home_amt"
                        }
                    ]
                },
                {
                    "ColTitle": "Amount",
                    "ColType": "Money",
                    "MetaData": [
                        {
                            "Name": "ColKey",
                            "Value": "subt_nat_home_amount"
                        }
                    ]
                }
            ]
        },
        "Rows": {
            "Row": [
                {
                    "Header": {
                        "ColData": [
                            {
                                "value": "1000 Bootcamp AMEX Acc",
                                "id": "134"
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            }
                        ]
                    },
                    "Rows": {
                        "Row": [
                            {
                                "ColData": [
                                    {
                                        "value": "Beginning Balance"
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    },
                                    {
                                        "value": ""
                                    }
                                ],
                                "type": "Data"
                            }
                        ]
                    },
                    "Summary": {
                        "ColData": [
                            {
                                "value": "Total for 1000 Bootcamp AMEX Acc"
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            },
                            {
                                "value": ""
                            }
                        ]
                    },
                    "type": "Section"
                },
            ] // TODO: this one was missing
        }
    // ] TODO: this one is accidentally
    }
];


function generateDynamicTable(){

    var noOfContacts = myContacts.length;

    if(noOfContacts>0){


        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");
        table.style.width = '50%';
        table.setAttribute('border', '1');
        table.setAttribute('cellspacing', '0');
        table.setAttribute('cellpadding', '5');

        // retrieve column header ('Name', 'Email', and 'Mobile')

        var col = []; // define an empty array
        for (var i = 0; i < noOfContacts; i++) {
            for (var key in myContacts[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE TABLE HEAD .
        var tHead = document.createElement("thead");


        // CREATE ROW FOR TABLE HEAD .
        var hRow = document.createElement("tr");

        // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");
            th.innerHTML = col[i];
            hRow.appendChild(th);
        }
        tHead.appendChild(hRow);
        table.appendChild(tHead);

        // CREATE TABLE BODY .
        var tBody = document.createElement("tbody");

        // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
        for (var i = 0; i < noOfContacts; i++) {

            var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD .


            for (var j = 0; j < col.length; j++) {
                var td = document.createElement("td");

                // td.innerHTML = JSON.stringify(myContacts[ i ][ col[ j ] ]); // TODO: for debugging purpose instead of the following line
                td.innerHTML = myContacts[i][col[j]];
                bRow.appendChild(td);
            }
            tBody.appendChild(bRow)

        }
        table.appendChild(tBody);


        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("myContacts");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);

    }
}

generateDynamicTable() // TODO: call was missing
<div id="myContacts"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...