title: ERROR TypeError: Cannot read property X of undefined
body: <p>I have following Interface to be used as a type for a JSON file : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export interface IIndustrySectors {
    IndustrySector: string;
    isSelected: string;
    dataSubjectCategories:string[];
    dataTypeCategories:string[];
    SubIndustries:[{
      IndustrySector: string;
      isSelected: string;
      dataSubjectCategories:string[];
      dataTypeCategories:string[];
      SubIndustries:[{}]
    }]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and, two services:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 
   
   // Read all the Data from the JSON file
   getMainIndustrySectors(): Observable&lt;IIndustrySectors[]&gt; {
      return this.http.get&lt;IIndustrySectors[]&gt;(this.industrySectorsURL).pipe(
        tap(((data) =&gt; console.log('All: ' + data) )),
        catchError(this.handleError)
      );
    }
  
  //Get Specific object 
    getBySector(sector): Observable&lt;IIndustrySectors|  undefined&gt; {
      return this.getMainIndustrySectors().pipe(
        map((products: IIndustrySectors[]) =&gt; products.find(p =&gt; p.IndustrySector === sector)));
  
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a part of the JSON file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> [
     {
        "IndustrySector":"Accommodation and Food Service Activities",
        "isSelected": "false",
        "dataSubjectCategories":["DS.Employees","DS.Collaborators"],
        "dataTypeCategories":"Personal Data",
        "SubIndustries": [
          {
            "IndustrySector":"Food and Beverage Service Activities",
            "isSelected": "false",
            "dataSubjectCategories":[],
            "dataTypeCategories":[],
            "SubIndustries":[]
          },
          {
            "IndustrySector":"Accommodation",
            "isSelected": "false",
            "dataSubjectCategories":["DS.Minor","DS.Parent","DS.Legal Person","DS.Natural Person","DS.Disable"],
            "dataTypeCategories":[],
            "SubIndustries":[]
          }
        ]
      }
    ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is when I call the service "getBySector" by following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.readjsonService.getBySector(sector).subscribe(response=&gt;{
  
        if(response.dataSubjectCategories.length&gt;0)
        {
          for(i=0; i&lt;response.dataSubjectCategories.length;i++ ){
            this.DSofSectores.push(response.dataSubjectCategories[i])
          }
        }
        
        })</code></pre>
  </div>
  </div>
  
  when I see the the typeof the response, it is object!</p>
  
  <p>It tthrows an error:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'dataSubjectCategories' of undefined " </p>
  </blockquote>
  
  <p>it prints the values, though.</p>
  
  <p>Why is it? </p>
  
  <p>what do is that based on the sector,  I get in "response" other data related to it and fill an array of type string which are bind to dropdown list. It works fine, but the following image showes what happens after selecting the sub sector:<a href="https://i.stack.imgur.com/wEtlQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wEtlQ.png" alt="enter image description here"></a></p>
  
  <p>PLEASE help me , I am newbie and I am so sick of this :((
  Thanks.</p>
  
  <p>EDIT:
  when I say </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> if (response == undefined) {
            throw new Error("sector not found");
          }
          else { .....</code></pre>
  </div>
  </div>
  </p>
  
  <p>it passes the condition, meaning it is not undefined, yet it say "cannot read undefined"</p>