將JSON數據轉換成漂亮的GUI表格

我對前端開發非常陌生，我有JSON文件，我想在一個漂亮的GUI或HTML中顯示。將JSON數據轉換成漂亮的GUI表格

到目前爲止我試圖使用bootstrap，角度，數據表看起來像我迷路，所以如果你能幫助我，這將是偉大的。

MyJOSN文件樣本

{ 
    "transactions": [{ 
     "txn": { 
      "request": [{ 
       "Field": "000", 
       "length": "004", 
       "value": "0100" 
      }, { 
       "Field": "005", 
       "length": "016", 
       "value": "11110010 00111100 " 
      } 
      ], 
      "response": [{ 
       "Field": "000", 
       "length": "004", 
       "value": "0110" 
      }, { 
       "Field": "001", 
       "length": "008", 
       "value": "00110010" 
      }] 
     } 
    }] 
}

我要顯示的數據的方式是如下

Txn--(when click expand) 
    --Request --(when click and expand) 
     Field Length Value (from the request array and the values from array) 


    --Response (when click and expand) 
     Field Length value (the values from the resposne array)

注：「交易」陣列可以有多個「TXN」

請指導一個簡單的方向我怎樣才能實現上述，任何代碼將是偉大的。

來源

2017-04-05 Abrar Ahamed

這是一個樹形結構，我爲javascript UI樹google搜索，許多合適的組件之一是[jstree]（https://www.jstree.com/） – James

不知道爲什麼投票 –

我沒有downvote，但我懷疑這是因爲SO實際上並不是一個「爲我寫代碼」的網站，而更像是「這裏有一些我幾乎可以工作的代碼，但我無法弄清楚這一點」網站。 – Lex

這裏是你期望的樣本，純粹的Angular，沒有額外的JavaScript。我已經添加了一些交易到交易陣列和許多不同的txn，我認爲這是交易編號。

的index.html

<!doctype html> 

<html lang="en" ng-app="app"> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
    <script src="script.js"></script> 
    <style> 
    strong {cursor: pointer;} 
    </style> 
</head> 

<body> 

<div ng-controller="ExampleController"> 
    <ul> 
     <li ng-repeat="t in data.transactions"> 
      <ul> 
       <li ng-repeat="(key, value) in t" ng-if="key!='__opened'">     
        <strong ng-click="t.__opened=!t.__opened">{{key}} --</strong> 
        <ul ng-if="t.__opened"> 
         <li> 
          <strong ng-click="value.request.__opened=!value.request.__opened">--Request</strong> 
          <ul ng-if="value.request.__opened"> 
           <li ng-repeat="re in value.request"> 
            {{re.Field}} {{re.length}} {{re.value}} 
           </li> 
          </ul> 
         </li> 
         <li> 
          <strong ng-click="value.response.__opened=!value.response.__opened">--Response</strong> 
          <ul ng-if="value.response.__opened"> 
           <li ng-repeat="re in value.response"> 
            {{re.Field}} {{re.length}} {{re.value}} 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

</body> 
</html>

的script.js

angular.module('app', []); 

angular.module('app') 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.data = { 
      "transactions": [{ 
       "ABC-123": { 
        "request": [{ 
          "Field": "000", 
          "length": "004", 
          "value": "0100" 
         }, 
         { 
          "Field": "005", 
          "length": "016", 
          "value": "11110010 00111100 " 
         } 
        ], 
        "response": [{ 
          "Field": "000", 
          "length": "004", 
          "value": "0110" 
         }, 
         { 
          "Field": "001", 
          "length": "008", 
          "value": "00110010" 
         } 
        ] 
       }, 
       "DEF-456": { 
        "request": [{ 
          "Field": "111", 
          "length": "006", 
          "value": "0145" 
         }, 
         { 
          "Field": "555", 
          "length": "036", 
          "value": "22210010 00111100 " 
         } 
        ], 
        "response": [{ 
          "Field": "333", 
          "length": "765", 
          "value": "5112" 
         }, 
         { 
          "Field": "088", 
          "length": "009", 
          "value": "00220022" 
         } 
        ] 
       } 
      }, { 
       "GHI-123": { 
        "request": [{ 
          "Field": "000", 
          "length": "004", 
          "value": "0100" 
         }, 
         { 
          "Field": "005", 
          "length": "016", 
          "value": "11110010 00111100 " 
         } 
        ], 
        "response": [{ 
          "Field": "000", 
          "length": "004", 
          "value": "0110" 
         }, 
         { 
          "Field": "001", 
          "length": "008", 
          "value": "00110010" 
         } 
        ] 
       }, 
       "JKF-456": { 
        "request": [{ 
          "Field": "111", 
          "length": "006", 
          "value": "0145" 
         }, 
         { 
          "Field": "555", 
          "length": "036", 
          "value": "22210010 00111100 " 
         } 
        ], 
        "response": [{ 
          "Field": "333", 
          "length": "765", 
          "value": "5112" 
         }, 
         { 
          "Field": "088", 
          "length": "009", 
          "value": "00220022" 
         } 
        ] 
       } 
      }] 
     } 
    }]);

和工作plunker一起玩：https://plnkr.co/edit/mokM1ILRY8HbF7BAVa5R?p=preview

希望它能幫助！

來源

2017-04-05 23:12:44

感謝那正是我想要的，但我有一個問題，如果我再添加一個「txn」記錄到「交易」第二個記錄沒有得到顯示。因爲我的json文件將在交易中有多個txn記錄。我必須循環通過什麼pls advise –

我已經更新了我的答案，更復雜的示例包括許多不同數量的不同交易。 –

非常感謝你。這是完美的 –

將JSON數據轉換成漂亮的GUI表格

回答

相關問題