Dynamic value?

[voznik]

Is it possible to update the json-formatted view when an object changes dynamically?

I like your component, and wanted to use it to display reactive form state/data, but your current implementation is useless for that.

[hivivo]

please check out v2.2.0 to see if it works for you.

[voznik]

no, it doesn't work with v2.2.0

I will make stackblitz example for this issue later

[sezer]

Hi. I'm using v2.3.1 but still not able to update viewer after model change. I can see model change but viewer not updating itself dynamically. I've tried to follow stackblitz demo but I couldn't make it work.

I've a component and 'data' model updates when user interact with form. I can see model change with {{data | json}} but viewer doesn't update itself.

Custom components HTML {{ data | json }} <br> <ngx-json-viewer [json]="data"></ngx-json-viewer> Custom components TS export class ScpDebuggerComponent { @ Input('data') data: any; constructor() { } } SAMPLE USAGE <m-scp-debugger [(data)]="JSON_DATA"></m-scp-debugger>

[roastedmonk]

Yes able to update. you are to re-initialize the data fully every-time not just part

[patrickrioux]

I'm experiencing the same issue with v2.4.0. I think there is a missing handler to detect json changes and force reloading the json within the viewer. This is definitely a bug.

[javierarocena]

Its works with a function:

Html <ngx-json-viewer [json]="getJson()"></ngx-json-viewer>

Typescript getJson(){ return JSON.parse(JSON.stringify(this.json) || '') }

[patrickrioux]

Yes that method works but it is super slow in comparison to standard Angular binding {{ model | json }}. When changing the model (like typing in a textarea) the text is so slow that is ngx-json-viewer is unusable.

[kbpontius]

Same issue here. Setting a property on the object didn't refresh the JSON view, so I set object itself to something else (null, {}, etc) then add back the properties with updated values. You could probably accomplish this same thing using a deep copy and storing the old values, setting the JSON object to null, then reassigning the old values (with updates) to the JSON object.

// Using the `cloneDeep` function from `lodash`
const oldObject = cloneDeep(jsonObject)
jsonObject = null

oldObject.someProperty = "newValue"

jsonObject = oldObject

Won't work for everyone, but at least it's better than doing a function (which will be called repeatedly by Angular).

[donhieu123]

You can use this cheat to fix problem: <ngx-json-viewer *ngIf="flag" [json]="obj" [expanded]="true"> <ngx-json-viewer *ngIf="!flag" [json]="obj" [expanded]="true">

Set 2 tag ngx-json-viewer with a flag, when "obj" change, you toggle flag too, it will update new obj.

It works for me

[JamilOmar]

It works if you use ts ... operator for example: submit() { if (this.form.valid) { this.validUser = { ...this.model}; }

<ngx-json-viewer [json]="validUser"></ngx-json-viewer>

Where model is being used by the form, you can use any other value instead of this.model.

[Iuriy-Budnikov]

angular 💩