title: Sort nested observable
body: <p>I have here a JSON file which looks like this:</p>
  
  <pre><code>[
      {
          "question": "What is your age range?",
          "options": ["10-20","20-30","30-40","40-50"]
      },
      {
          "question": "How did you find us?",
          "options": ["Friend recommendation","Google","Other"]
      },
      {
          "question": "Are you interested in etcetc?",
          "options": ["No","Yes","Meh"]
      }
  ]
  </code></pre>
  
  <p>In my project I've got a model with the same structure which looks like this:</p>
  
  <pre><code>export interface Test {
      question: string;
      options: string[];
  }
  </code></pre>
  
  <p>in my service file, I read the file like so (turning it into an observable, because I want to be able to change the order of the data and possibly later add/remove/change questions):</p>
  
  <pre><code>getSurveyQuestion(): Observable&lt;Test[]&gt; {
      return this.http
          .get&lt;Test[]&gt;("/path/to/questions.json")
          .do(data =&gt; console.log("All : " + JSON.stringify(data)))
  }
  </code></pre>
  
  <p>In the console, the above outputs:</p>
  
  <blockquote>
    <p>JS: All : [{"question":"What is your age range?,"options":["10-20","20-30","30-40","40-50"]}, { //.....}]</p>
  </blockquote>
  
  <p>My component file looks as follows:</p>
  
  <pre><code>export class TestComponent implements OnInit {
      propertyData: Test[] = [];
  
      constructor(private router: Router, private testService: TestService) {}
  
      ngOnInit() {
          this.testService.getSurveyQuestion().subscribe(data =&gt; {
              this.propertyData = data;
          }, err =&gt; {
              console.log(err);
          })
      }
  }
  </code></pre>
  
  <p>In my html, I output it to the screen like so:</p>
  
  <pre><code>&lt;StackLayout *ngFor="let item of propertyData"&gt;
      &lt;Label text="{{item.question}}"&gt;&lt;/label&gt;
  &lt;/StackLayout&gt;
  </code></pre>
  
  <p>now, I want to add a button or something to the html, which on tap calls a function to rearrange the items the user can see on screen. For now, something that simply arranges the array of observables by question (alphabetically, ascending or descending) is good enough. I've been trying to accomplish this for hours, but nothing I found on google (and stackoverflow) has helped me accomplish this yet.</p>
  
  <p>Does any of you know how to sort/rearrange the data of an observable in the way I'm looking for?</p>
  
  <p>Thanks in advance.</p>
  
  <p>(in case it helps, I'm working with NativeScript + Angular).</p>