Question

我对前端开发很新，我有JSON文件，我希望在一个漂亮的GUI或HTML中显示。

到目前为止，我尝试使用bootstrap，angular，datatables看起来像是迷路了，所以如果你能帮助我，那就太棒了。

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)

注意：“transactions”数组可以有多个“txn”

请指导一个简单的方向如何实现上述目标，任何代码都会很棒。

Answer 1

这是您期望的样本，纯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"
                        }
                    ]
                }
            }]
        }
    }]);

和一个有效的玩家：https://plnkr.co/edit/mokM1ILRY8HbF7BAVa5R?p=preview

希望它有所帮助！

将JSON数据转换为漂亮的GUI表

1 个答案: