title: Arrow function on Aurelia with a json file
body: <p>I am new to Aurelia and have gone thru the tutorials on PluralSight and Egghead.io but still can't figure out my issue.</p>
  
  <p>I have a json file, let's call it bob.json.  Inside has a collection of objects about bob.  Each object has an id.  I want to use arrow notation to get an object in the collection by id.  Here is what I've done so far.</p>
  
  <h2>bob.json</h2>
  
  <pre><code>[
      {
          "id": 1,
          "name": "eyes",
          "position": "head",
          "color": "blue"
      },
      {
          "id": 2,
          "name": "nose",
          "position": "head",
          "shape": "triangle"
      },
      {
          "id": 3,
          "name": "mouth",
          "position": "head",
          "chapped": true
      },
      [more body data here]
  ]
  </code></pre>
  
  <h2>person.html</h2>
  
  <pre><code>&lt;template&gt;
      &lt;ul repeat.for="bodypart of bodyparts"&gt;
          &lt;li&gt;
              &lt;a id="${bodypart.id}" href="javascript:void(0);" click.trigger="displayPart($event)"&gt;${bodypart.name}&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <h2>person.js</h2>
  
  <pre><code>import {inject} from "aurelia-framework";
  import {BodyData} from "bodyData";
  
  @inject(BodyData)
  export class(bodyData) {
      constructor(bodyData){
          this.bodyData = bodyData;
      }
  
      activate(){
          return this.bodyData.getAll().then(bodyparts =&gt; this.bodyparts = bodyparts)
      }
  
      displayPart(e){
          this.bodyData.getBodyPart(e.target.id)...
      }
  }
  </code></pre>
  
  <h2>bodyData.js</h2>
  
  <pre><code>import {inject} from "aurelia-framework";
  import {httpClient} from "aurelia-http-client";
  
  let baseUrl = "bob.json";
  
  @inject(httpClient)
  export class BodyData {
      constructor(httpClient){
          this.http = httpClient;
      }
  
      getAll(){
          return this.http.get(baseUrl).then(response =&gt; { return response.content });
      }
  
      getBodyPart(id){
          return this.http.get(baseUrl).then(response =&gt; {
              return response.content.filter(n =&gt; n.id == id);
          });
      }
  }
  </code></pre>
  
  <p>The ellipsis parts are where I have no clue what to put for the arrow function.  My questions are, can someone help me understand what needs to be placed in those areas to return just the object that matches that specific id and also where is the best resource that explains how to use arrow notation with json data.</p>
  
  <h2>UPDATE:</h2>
  
  <p>So I found a good explanation on: </p>
  
  <p><a href="https://googlechrome.github.io/samples/arrows-es6/" rel="nofollow">https://googlechrome.github.io/samples/arrows-es6/</a>  </p>
  
  <p>From what I can gather it's like an SQL statement in a way.</p>
  
  <p>in bodyData.js I used this statement:</p>
  
  <pre><code>getBodyPart(id) {
      return this.http.get(baseUrl).then(response =&gt; {
          return response.content.filter(n =&gt; n.id == id);
      });
  }
  </code></pre>
  
  <p>Now, how I understand that is filter the returned content where the objects id equals the passed in id.  Kind of how SQL would read:</p>
  
  <pre><code>SELECT [object]
  FROM [json file]
  WHERE [object].id = id
  </code></pre>
  
  <p>if this is correct then I think I got that part.  The part that is really throwing me now is the displayPart(e) function in the person.js file.  How do I view this data to see if it is returning the correct value?  Any help is greatly appreciated.</p>