JSON 数据转换成漂亮的 GUI 表答案

【问题标题】：JSON data into nice GUI tablesJSON 数据转换成漂亮的 GUI 表
【发布时间】：2017-04-05 21:53:52
【问题描述】：

我是前端开发的新手，我有 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”

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

【问题讨论】：

这是一个树形结构，我用谷歌搜索了 javascript ui 树，其中一个合适的组件是jstree
不知道为什么投反对票
我没有投反对票，但我怀疑这是因为 SO 并不是真正的“为我编写代码”网站，而更多的是“这里有一些我几乎可以使用的代码，但我可以不知道这一点”网站。

标签： javascript jquery angularjs json

【解决方案1】：

这里是您所期望的示例，纯 Angular，没有额外的 JavaScript。我已经向 transactions 数组和许多不同的 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

希望对你有帮助！

【讨论】：

谢谢，这正是我想要的，但如果我在“事务”中再添加一个“txn”记录，第二个记录不会显示，我会遇到一个问题。因为我的 json 文件将有多个 txn 记录交易。我必须通过一些东西请建议
我已经用更复杂的样本更新了我的答案，包括许多不同数字的不同交易。
非常感谢你。它的完美