I 'd like to propose a button to collapse or expand the json view in my page.
I tried to use $watch (angular watcher) to do it by changing the value of the collapsed tag in HTML dynamically each time I click. But it doesn't work.

Do I do something wrong or may it's not possible.

HTML :

My click definition

<h2 class="panel-title pull-left">{{selectedConsumption.contractList.contract[0].usageConsoList.usageConso[0].usageKey}}</h2><span class="pull-right" ng-click="toggleCollapse()">+</span>

My Json Explorer item

<div class="panel-body"> <json-explorer json-data="{{selectedConsumption}}" collapsed="{{collapse}}"></json-explorer> </div>

Javascript :

sccController.controller('ConsumptionCtrl', ['$scope', 'ConsumptionService',
    function($scope, ConsumptionService) {

        $scope.collapsed = true;

        ConsumptionService.getAll(function(data) {

            $scope.consumptions = data;
            $scope.selectedConsumption = data;
        });

        $scope.details = function(consumption) {
            $scope.selectedConsumption = consumption;
        };

        $scope.toggleCollapse = function() {
            $scope.collapsed = !$scope.collapsed;
        };

        $scope.$watch('collapsed', function(newval, oldval) {
            $scope.collapse = newval;
        });
}]);

Thanks

Hi guys,

I have tried this in a few apps now and aside from the demo I cannot get it to work.

I always end up with something like the following when I look at the element.

""

where {...} is the json data

{ "id": "54cbbbc8bf3cba42aea6ffc4",
"index": 0,
"guid": "0127d734-75a3-4d76-8ad5-8af0478043dd",
"isActive": false,
"balance": "$3,775.10",
"picture": "http://placehold.it/32x32",
"age": 22,
"eyeColor": "brown",
"name": "Arnold Romero",
"gender": "male",
"company": "BUZZOPIA",
"email": "[email protected]",
"phone": "+1 (973) 531-2834",
"address": "999 Rapelye Street, Fowlerville, Illinois, 1664",
"about": "Eiusmod ex velit voluptate veniam culpa. Cupidatat aliqua consectetur reprehenderit cupidatat pariatur sunt velit ut ad non veniam id proident fugiat. Aute aliquip consequat ullamco incididunt cupidatat. Nostrud pariatur eu ex deserunt pariatur mollit reprehenderit sunt in qui. Velit proident deserunt quis commodo esse duis consectetur Lorem magna nostrud culpa.\r\n",
"registered": "2014-05-12T12:59:32 +03:00",
"latitude": 20.153763,
"longitude": 42.329199,
"tags": [
"ut",
"ad",
"consequat",
"eu",
"ea",
"do",
"aliqua"
],
"friends": [
{
"id": 0,
"name": "Terra Booker"
},
{
"id": 1,
"name": "Gilmore Saunders"
},
{
"id": 2,
"name": "Nash Riggs"
}
],
"greeting": "Hello, Arnold Romero! You have 9 unread messages.",
"favoriteFruit": "banana"
}

Could you enhance this to have the ability to indicate if you want to have the initial state of the "collapser" to be collapsed?

<json-explorer json-data="{{json}}" collapsed="true"></json-explorer>

Just some added information, I did do the quick hack of just calling click during the processing of each collapser a found that it hangs the browser. Same case if i select all the collapsers after and call click. I know this was a hack for the purposes of my "demo" of what i wanted my page to look like on load. I thought id mention it so it wasn't suggested as a solution. Performance wise it will make sense to handle it in the directive. I thought it would be a nice little feature for you to add.

If i get some time i might throw together a pull request but i cant right now.

In trying to figure out an error I'm getting I came across something out of place:

On line 201 in the current master is this line:

var ellipsis = target.parentNode.getElementsByClassName('ellipsis')[0];

This does nothing, the var ellipsis is not used anywhere that I can determine.

I thought maybe I could figure out my other issue by searching for that line of code since you mention it's based on another project and I found the same line of code in an online search but it's for a chrome json viewer plugin I think (not firefox related) so perhaps there was some experimentation going on? In any case there is a bug of some kind in this area (which I'll report separately as soon as I figure it out) and this bit of code is not doing anything.

In the demo/data.html. If we change the angular version from 1.0.8 to 1.3.8. The page will display blank screen only. Please fix it.

I just got the most recent release from bower and when clicking collapse there is some logic that fails. I'll submit a pull request

Correct bower name is "angular", but this project uses "angularjs". This leads to 2 copies of Angular being installed by bower.

https://github.com/angular/bower-angular/blob/v1.2.29/bower.json#L2
https://github.com/Goldark/ng-json-explorer/blob/master/bower.json#L16

I noticed this issue and tried your demo which also has this issue. any boolean field won't be displayed

See title :)

Would be easier for new versions :)

It will help your users to specify a module version.

Currently, bower install this as

    "ng-json-explorer": "*"

Hello, in my app data is brought down via api from a server so there is no immediate value in the binding to the json explorer and as a result a nasty parse error is displayed in the console.

To work around I simply set a fake bit of json before the view goes to get the json from the api which avoids the error.

However this is really a bug I think as that is not an unusual condition.

I suggest that the piece of code in line 188:

  var json = JSON.parse(val);

Be modified to handle the very likely event that val is undefined or empty and not attempt to parse empty json so that a JSON parse error is not displayed in console unnecessarily.

When you default to collapsed and then expand a collapsed array the ellipsis stays.

The JSON boolean props was not showing up ini the explorer. I was using the dist/angular-json-explorer.min.js version, i changed for the dist/angular-json-explorer.js version and it works fine.

I just change a line in valueToHtml because my JSONs use to have null values.
...
formatter.valueToHtml = function (value) {
var type = value && value.constructor;
...

The documentation and previous versions used an attribute json-data. The example show this attribute.
But the last version available uses "data".

Is-it possible to authorize the two ?

Hi
This is really awesome.
I would like to know if there is an option to edit the json?

Regards
Deepthi

Unknown property ‘-moz-border-radius’. Declaration dropped. is listed in Firefox console. Would you be open to a PR to remove it from https://github.com/odra/ng-json-explorer/blob/master/src/angular-json-explorer.css#L46 ????

The readme shows the installation via bower install ng-json. This should be bower install ng-json-explorer.

Hi,
its a great help that this plugin to me,
but i found when i want to dynamically clear the json-explorer in view by pass ''(empty string), it doesn't work. Also it can not handle plain string right, such as '"null"'.
Help this feedback could be help
Best regard

Brackets and Braces are not vertically aligned:

Removing the space after </span> at

I am testing this with a fairly large chunk of JSON. It loads and displays correctly as far as I can tell but when I go to collapse some subsections I get that error message.

Note that this same exact json works correctly with the online json viewer here:
http://www.jsoneditoronline.org/ and it parses correctly in ng-json-explorer without error, this seems to be linked to the collapsible stuff.

I can provide the data to you but only out of band, not posted here, let me know please.

That whole area of code appears to need some love, there are unused statements in there (line 201) and it looks like some kind of problem causing this error but I can't pin it down.