title: JavaScript map(), undefined property of object from the collection
body: <p>I have a collection of filter objects which is <code>this.selectedFilters</code>. </p>
  
  <p>I use the JS map method to select only the <code>field</code> property of the filter object.</p>
  
  <pre><code> console.log(this.selectedFilters.map((val) =&gt; {
              console.log(val);
              console.log(val.field);
              console.log(val['field']);
              return val.field;
          }));
  </code></pre>
  
  <p>The result is:</p>
  
  <p><img src="https://i.stack.imgur.com/kOKNf.png" alt="enter image description here"></p>
  
  <p>Can somebody tell me why does <code>val.field</code> gives an undefined value? :(</p>
  
  <p>PS: I used TypeScript</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I think I know why <code>val</code> was a string. Maybe it's because <code>this.selectedFilters</code> is a ng-model of a <code>select</code> HTML element (multiple enabled) with options having an object value. Maybe the option value was converted from an object to a json string when transferred to the  <code>this.selectedFilters</code> model</p>