i new front end development,i have json file want display in nice gui or html.
so far tried use bootstrap , angular , datatables looks getting lost if can me out great.
myjosn file sample
{ "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" }] } }] } the way want display data below
txn--( when click expand) --request --( when click , expand ) field length value ( request array , values array) --response ( when click , expand ) field length value ( values resposne array) note : "transactions" array can have multiple "txn"
please guide 1 simple direction how can achieve above,any code great.
here sample of expect, pure angular, no additional javascript . i've added transactions transactions array , many different txn suppose transactions numbers.
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" } ] } }] } }]); and working plunker play : https://plnkr.co/edit/mokm1ilry8hbf7bava5r?p=preview
hope helps !
Comments
Post a Comment