Not able to update json if there are multiple JSONeditor

[ankurtechelogy]

No description provided.

[mariohmol]

Hi.. can u describe more this issue?

the demo is working with 2 json editors with no issues

https://stackblitz.com/edit/ang-jsoneditor

[mariohmol]

if u still have this issue... let us know

[osmanraifgunes]

I have the same problem. If the there is multiple editors (created by ng-for loop) the events are not firing correctly.

Always first editors parameters are passed to bound function of the event.

[mariohmol]

please provide an stackblitz code or something to test this behavuour?

[mariohmol]

Hi.. @osmanraifgunes with the #58 fixes this issue? can u make a demo with this behaviour so we can fix that?
thanks!

[osmanraifgunes]

Here is the example : https://stackblitz.com/edit/ang-jsoneditor-easjts?file=src/app/app.component.html

Both editors trigger event, but the data is always the first one's data. I think problem is the ang-jsoneditor module works as singleton.

[mariohmol]

thanks for that info!!

what u mean about working as singleton?

do u have any ideas how to fix this?

[mariohmol]

The thing here is about reusing the same editorOptions..

in you case what i did to fix was:

<json-editor [options]="makeOptions()" [data]="prd" (change)="showJson($event)"></json-editor>

  makeOptions = () => {
    return new JsonEditorOptions();
  }

[osmanraifgunes]

I think solution is using @ViewChildren instead of @ViewChild. I asked this on stackof : https://stackoverflow.com/questions/60040466/angular-component-multiple-instance-binding-input-problem

But doing so is writing this module whole again.

[mariohmol]

I included this solution in the docs and in the demo app as well.. see if that works in your side

[SahilMahadwar]

Hi how can we add options when we use
makeOptions = () => {
return new JsonEditorOptions();
}

[mariohmol]

Hi you can add this way.

Just updated the docs with it

makeOptions = () => {
  const options = new JsonEditorOptions();
  options.modes = ['code', 'text', 'tree', 'view'];
  return options;
}