JSONデータを素敵なGUIテーブルに入れよう

私はフロントエンド開発にはまったく新しいものです。私は素敵なGUIやHTMLで表示したいJSONファイルを持っています。JSONデータを素敵なGUIテーブルに入れよう

これまでのところ、私はブートストラップを使用しようとしましたが、角度のあるデータセットは、迷子になっているように見えます。

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ツリーのためにgoogled、多くの適切なコンポーネントの1つは[jstree]です（https://www.jstree.com/） – James

なぜかダウン投票を知りません –

私はdownvote、私はそれが本当に「自分のコードを書く」サイトではないと思うが、「ここには私がほとんど働いているコードがいくつかあるが、私はこの1ビットのサイトを見つけられない。 – Lex

ここでは、純粋な角型、追加の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

ありがとうthatsちょうど私が欲しいが、私は1つの問題をもう1つ "txn"レコードを "トランザクション" 2番目のレコードが表示されていません。私のjsonファイルトランザクションで複数のtxnレコードがあります。私は何かをループする必要がありますplsのアドバイス –

私は、異なる番号で多くの異なる取引を含むより複雑なサンプル私の答えを更新しました。 –

Thanlあなたは大変です。それは完璧だ –

JSONデータを素敵なGUIテーブルに入れよう

答えて

関連する問題