saving part of JSON in a function invoked in the html file

Question

I'm developing in Angular.

I'm trying to save part of a JSON in a variable inside a function called in an HTML file:

<select id="postazione" onchange="postazioneSelezionata()">
    <option value="" selected disabled >Scegli una postazione</option>
    <option *ngFor="let postazione of postazioniNome" value="{{postazione}}">{{postazione}}</option>
</select>

(the onchange="postazioneSelezionata()").

it seems works, because if I try to print the value I'm interested in inside the console.log, it is shown correctly.

  postazioneSelezionata(){
    this.postazione = document.getElementById("postazione").value;
    console.log(this.postazione);
  }

inside the function i'm also trying to show this in the terminal:

    console.log(this.fileJson.ricette[this.postazione]);

Here comes the problem...

If i try to show the part of the JSON this.fileJson inside the console.log(), it return me an error:

ERROR TypeError: Cannot read property 'ricette' of undefined at HTMLSelectElement.postazioneSelezionata [as __zone_symbol__ON_PROPERTYchange] .

i've tried to show it in another function (not called from an html onchange event)

this.postazione = "GRIGLIA";
    console.log(this.fileJson.ricette[this.postazione])

and it works... this code (called in another function) show me the portion of the fileJson JSON i'm trying to obtain

I was able to print the label of the dropdown menu in console, the problem is that i can't log into the variable with my JSON. Thanks anyway — Andrea Favero, Aug 09 '19 at 10:57
getting value with document.getElementById("postazione").value is not best way to get the value. Try to use ngModel if you want. — m.akbari, Aug 09 '19 at 11:07
Also, because on rendering, the postazioneSelezionata() function is called before there is an select element with id="postazione". the first value of this.postazione will be undefined. Use builtin tools from angular. Look up the ngModelChange, or even two-way bindings — m.akbari, Aug 09 '19 at 11:09

score 1 · Answer 1 · answered Aug 10 '19 at 18:32

Possibly this post will be of help.

Additionally, even though you say your onchange works, the standard syntax for such events with Angular, as m.akbari mentioned in his comment, is (change):

<select id="postazione" (change)="postazioneSelezionata()">
...
</select>

And from there, unless you're not particularly bothered about the value of the change and just care to know that something was changed, you would probably pass the value in that changed...

<select id="postazione" onchange="postazioneSelezionata($event.target.value)">
...
</select>

Similar changes, syntax-wise, in your options for entering your value:

<option *ngFor="let postazione of postazioniNome" [value]="postazione">{{postazione}}</option>

Input/output binding, two-way binding, event binding... all are fairly integral to Angular, it's worth getting them figured out.

Again, see the post linked at the top for a more rounded answer and examples to using selects with Angular.

saving part of JSON in a function invoked in the html file

1 Answers1