title: Using nested mapping within Observable subscription - Angular6
body: <p>I am fetching some data via an API call (within my dataservicse.ts file) - and the response I get is a sort of complex JSON structure. I am able to fetch a specific part of the response as follows in my corresponding Component file as follows - </p>
  
  <p>Here is one of the JSON object response that represents the general structure - </p>
  
  <pre><code>{
      "address": {
          "building": "1234",
          "coord": [0, 0],
          "street": "123 Main Street",
          "zipcode": "00000"
      },
      "address2": "Test Suite 000",
      "grades": [{
          "grade": "A",
          "score": 3
      }, {
          "grade": "B",
          "score": 4
      }, {
          "grade": "A",
          "score": 2
      }],
      "name": "John Doe",
      "_id": "1212121"
  }
  </code></pre>
  
  <p>Now - my goal is to acquire the 'name' attribute as well as the first 'grade' value within the grades attribute from each response object - and map them into separate Arrays so that I can display them in table columns using *ngFor.</p>
  
  <p>This is my Component code </p>
  
  <pre><code>export class TestDataComponent implements OnInit {
  
  name$: Object;
  grade$: Object;
  
  constructor(private data: DataService, private data2: DataService) { }
  
  ngOnInit() {
     //getAPIData is returning the API response from the dataservices.ts file
     this.data.getAPIData().subscribe(
         data=&gt;console.log(data.response.map(name=&gt;name.name))
         ); //this works fine - I get the names in an array
  
       this.data2.getAPIData().subscribe(
       data2=&gt;console.log((data2.response.map(grade=&gt;grade.grades)).map(grades 
          =&gt; {grades.map((value, index) =&gt; value.grade})) //this returns an undefined value
    );
   }
  </code></pre>
  
  <p>Now - if I <code>console.log((data2.response.map(grade=&gt;grade.grades))</code>
  I get an Array of Array objects such as -</p>
  
  <pre><code>Array - [Array(3), Array(3), Array(2)]
  </code></pre>
  
  <p>and each of them consist of the 'grades' attribute Array of objects.
  (taking the first array from above) - </p>
  
  <pre><code>Array(3)
  0:{"grade": "A","score": 3}
  1:{"grade": "B", "score": 4}
  2:{"grade": "A", "score": 2}
  </code></pre>
  
  <p>Thus - I further map my initial response to achieve the 'grade' value. Also - I only want the first grade - thus I have a simple condition added as follows - </p>
  
  <pre><code>console.log((data2.response.map(grade=&gt;grade.grades))
                .map(grades 
                    =&gt; {grades.map((value, index) =&gt;{if(index&lt;1) value.grade})}))
  </code></pre>
  
  <p>As mentioned in the comment - I get an undefined value. </p>
  
  <p>I undestand this issue may be fairly complex but I've tried my best to explain it as clearly as possible. My goal is to get the first 'grade' values from each object and display them in an Array - just as the names, so that I can use it to display it on a table.</p>
  
  <p>I am fairly new to Angular6, just switching from Angular 1.6 - so I am pretty sure I am messing something up. </p>
  
  <p>What would be the best way to get the grade values into an Array by nested mapping within subscribe? Or is there a better approach to the same ?</p>
  
  <p>Also - for the sake of simplicity, ignore the fact that the first subscription is present (for the name attribute) - I showed it here so as to make it clear as to what I want to achieve.</p>