yaru22 / angular-json-human Goto Github PK
View Code? Open in Web Editor NEWAngular Json Formatting for Human Beings (inspired by https://github.com/marianoguerra/json.human.js)
License: MIT License
Angular Json Formatting for Human Beings (inspired by https://github.com/marianoguerra/json.human.js)
License: MIT License
thanks for the package. Can you provide support for code folding. If the json file is relatively large, it would be helpful to explore
the data by expanding the node.
try the following json result from yahoo query and get nothing back in the first few indexes of the place array.
query url = "file:///C:/Documents%20and%20Settings/meeting/Desktop/AngularApps/NamesDemo/script.js"
resulting json =
{"query":{"count":7,"created":"2014-06-29T04:42:00Z","lang":"en-US","results":{"place":[{"lang":"en-US","uri":"http://where.yahooapis.com/v1/place/2466092","woeid":"2466092","placeTypeName":{"code":"7","content":"Town"},"name":"Ord","country":{"code":"US","type":"Country","woeid":"23424977","content":"United States"},"admin1":{"code":"US-NE","type":"State","woeid":"2347586","content":"Nebraska"},"admin2":{"code":"","type":"County","woeid":"12589225","content":"Valley"},"admin3":null,"locality1":{"type":"Town","woeid":"2466092","content":"Ord"},"locality2":null,"postal":{"type":"Zip Code","woeid":"12787902","content":"68862"},"centroid":{"latitude":"41.602928","longitude":"-98.929657"},"boundingBox":{"southWest":{"latitude":"41.591881","longitude":"-98.948021"},"northEast":{"latitude":"41.615952","longitude":"-98.904114"}},"areaRank":"2","popRank":"8","timezone":{"type":"Time Zone","woeid":"56043661","content":"America/Chicago"}},{"lang":"en-US","uri":"http://where.yahooapis.com/v1/place/12521200","woeid":"12521200","placeTypeName":{"code":"14","content":"Airport"},"name":"Chicago O'Hare International Airport","country":{"code":"US","type":"Country","woeid":"23424977","content":"United States"},"admin1":{"code":"US-IL","type":"State","woeid":"2347572","content":"Illinois"},"admin2":{"code":"","type":"County","woeid":"12588093","content":"Cook"},"admin3":null,"locality1":{"type":"Town","woeid":"2379574","content":"Chicago"},"locality2":{"type":"Suburb","woeid":"28751423","content":"O'Hare"},"postal":null,"centroid":{"latitude":"41.979599","longitude":"-87.882500"},"boundingBox":{"southWest":{"latitude":"41.970501","longitude":"-87.894722"},"northEast":{"latitude":"41.988689","longitude":"-87.870270"}},"areaRank":"2","popRank":"0","timezone":{"type":"Time Zone","woeid":"56043661","content":"America/Chicago"}},{"lang":"en-US","uri":"http://where.yahooapis.com/v1/place/19061","woeid":"19061","placeTypeName":{"code":"7","content":"Town"},"name":"East Ord","country":{"code":"GB","type":"Country","woeid":"23424975","content":"United Kingdom"},"admin1":{"code":"GB-ENG","type":"Country","woeid":"24554868","content":"England"},"admin2":{"code":"GB-NBL","type":"County","woeid":"12602153","content":"Northumberland"},"admin3":{"code":"","type":"Local Administrative Area","woeid":"56616839","content":"Northumerland"},"locality1":{"type":"Town","woeid":"19061","content":"East Ord"},"locality2":null,"postal":{"type":"Postal Code","woeid":"26788668","content":"TD15"},"centroid":{"latitude":"55.753738","longitude":"-2.017220"},"boundingBox":{"southWest":{"latitude":"55.728500","longitude":"-2.051800"},"northEast":{"latitude":"55.779140","longitude":"-2.013550"}},"areaRank":"2","popRank":"1","timezone":{"type":"Time Zone","woeid":"28350903","content":"Europe/London"}},{"lang":"en-US","uri":"http://where.yahooapis.com/v1/place/2466091","woeid":"2466091","placeTypeName":{"code":"7","content":"Town"},"name":"Ord","country":{"code":"US","type":"Country","woeid":"23424977","content":"United States"},"admin1":{"code":"US-OK","type":"State","woeid":"2347595","content":"Oklahoma"},"admin2":{"code":"","type":"County","woeid":"12589626","content":"Choctaw"},"admin3":null,"locality1":{"type":"Town","woeid":"2466091","content":"Ord"},"locality2":null,"postal":{"type":"Zip Code","woeid":"12790197","content":"74738"},"centroid":{"latitude":"33.909981","longitude":"-95.491829"},"boundingBox":{"southWest":{"latitude":"33.900879","longitude":"-95.502777"},"northEast":{"latitude":"33.919071","longitude":"-95.480873"}},"areaRank":"2","popRank":"1","timezone":{"type":"Time Zone","woeid":"56043661","content":"America/Chicago"}},{"lang":"en-US","uri":"http://where.yahooapis.com/v1/place/28297783","woeid":"28297783","placeTypeName":{"code":"22","content":"Suburb"},"name":"Ord","country":{"code":"US","type":"Country","woeid":"23424977","content":"United States"},"admin1":{"code":"US-NC","type":"State","woeid":"2347592","content":"North Carolina"},"admin2":{"code":"","type":"County","woeid":"12589414","content":"Guilford"},"admin3":null,"locality1":{"type":"Town","woeid":"2414469","content":"Greensboro"},"locality2":{"type":"Suburb","woeid":"28297783","content":"Ord"},"postal":{"type":"Zip Code","woeid":"12769040","content":"27401"},"centroid":{"latitude":"36.078411","longitude":"-79.789627"},"boundingBox":{"southWest":{"latitude":"36.074471","longitude":"-79.794502"},"northEast":{"latitude":"36.082352","longitude":"-79.784760"}},"areaRank":"0","popRank":"0","timezone":{"type":"Time Zone","woeid":"56043648","content":"America/New_York"}},{"lang":"en-US","uri":"http://where.yahooapis.com/v1/place/31063","woeid":"31063","placeTypeName":{"code":"7","content":"Town"},"name":"Ord","country":{"code":"GB","type":"Country","woeid":"23424975","content":"United Kingdom"},"admin1":{"code":"GB-SCT","type":"Country","woeid":"12578048","content":"Scotland"},"admin2":{"code":"GB-HLD","type":"County","woeid":"12602203","content":"Highland"},"admin3":{"code":"","type":"Local Administrative Area","woeid":"12696199","content":"Highland"},"locality1":{"type":"Town","woeid":"31063","content":"Ord"},"locality2":null,"postal":{"type":"Postal Code","woeid":"26787367","content":"IV44"},"centroid":{"latitude":"57.147400","longitude":"-5.941190"},"boundingBox":{"southWest":{"latitude":"57.107658","longitude":"-5.951930"},"northEast":{"latitude":"57.160198","longitude":"-5.902050"}},"areaRank":"2","popRank":"1","timezone":{"type":"Time Zone","woeid":"28350903","content":"Europe/London"}},{"lang":"en-US","uri":"http://where.yahooapis.com/v1/place/31062","woeid":"31062","placeTypeName":{"code":"7","content":"Town"},"name":"Ord","country":{"code":"GB","type":"Country","woeid":"23424975","content":"United Kingdom"},"admin1":{"code":"GB-SCT","type":"Country","woeid":"12578048","content":"Scotland"},"admin2":{"code":"GB-HLD","type":"County","woeid":"12602203","content":"Highland"},"admin3":{"code":"","type":"Local Administrative Area","woeid":"12696199","content":"Highland"},"locality1":{"type":"Town","woeid":"31062","content":"Ord"},"locality2":null,"postal":{"type":"Postal Code","woeid":"26787378","content":"IV6"},"centroid":{"latitude":"57.516159","longitude":"-4.479270"},"boundingBox":{"southWest":{"latitude":"57.507061","longitude":"-4.496190"},"northEast":{"latitude":"57.525249","longitude":"-4.462340"}},"areaRank":"2","popRank":"1","timezone":{"type":"Time Zone","woeid":"28350903","content":"Europe/London"}}]}}}
You mention that lodash is needed but your example code did not include the import. If you forget to import it, the parser goes into an infinite loop producing errors until the browser tab dies.
Would be good to update the documentation (and handle the error better) even if you don't get around removing the lodash dependency.
I need to implement this in Angular 2x.
How can we use it?
Hello,
the plnkr linked as minimal template has wrong template module
<script>
var app = angular.module('app', [
'yaru22.directives.jsonHuman'
]);
looks like it is now 'yaru22.jsonHuman'
thanks
hello,
I am not sure the watch work correctly if the data changes. I modified this way to make it work
.directive('jsonHuman',function () {
return {
restrict: 'A',
scope: {
jsonHuman: '='
},
templateUrl: 'template/angular-json-human-root.tmpl',
link: function (scope, elem, attrs) {
var json = null;
scope.$watch('jsonHuman', function (newVal) {
if (!_.isEmpty(newVal)) {
try {
//json = JSON.parse(scope.$eval(attrs.jsonHuman));
json = JSON.parse(newVal);
} catch (e) {
throw e
}
scope.json = json;
scope.isObject = _.isPlainObject(json);
scope.isArray = _.isArray(json);
}
});
}
};
})
i wasn't using this directive directly with a json string, but used to display an object. in that case I used like json =newVal;
The bower.json has angular "1.2.10" as a dependency. Is this specific version actually a dependency? Or can it be changed to "1.2.x" or even "1.3.x"?
We started using the package, and it caused problems during a 'bower install' run by downgrading angular.
Are there plans to make this available through Bower?? Would be great and way easier to include.
Thx
I have this json content, and it causes a very strange output from demo viewer.
{
"@context": "http://purl.imsglobal.org/ctx/caliper/v1/Context",
"@type": "http://purl.imsglobal.org/caliper/v1/AssessmentEvent",
"action": "http://purl.imsglobal.org/vocab/caliper/v1/action#Started"
}
Ironically, this issue is not present in the current json.human.js project
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.