Arrow function on Aurelia with a json file

Question

I am new to Aurelia and have gone thru the tutorials on PluralSight and Egghead.io but still can't figure out my issue.

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.

bob.json

[
    {
        "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]
]

person.html

<template>
    <ul repeat.for="bodypart of bodyparts">
        <li>
            <a id="${bodypart.id}" href="javascript:void(0);" click.trigger="displayPart($event)">${bodypart.name}</a>
        </li>
    </ul>
</template>

person.js

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 => this.bodyparts = bodyparts)
    }

    displayPart(e){
        this.bodyData.getBodyPart(e.target.id)...
    }
}

bodyData.js

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 => { return response.content });
    }

    getBodyPart(id){
        return this.http.get(baseUrl).then(response => {
            return response.content.filter(n => n.id == id);
        });
    }
}

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.

UPDATE:

So I found a good explanation on:

https://googlechrome.github.io/samples/arrows-es6/

From what I can gather it's like an SQL statement in a way.

in bodyData.js I used this statement:

getBodyPart(id) {
    return this.http.get(baseUrl).then(response => {
        return response.content.filter(n => n.id == id);
    });
}

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:

SELECT [object]
FROM [json file]
WHERE [object].id = id

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.

Answer 1

EUREKA! I did it! Okay, let me calm down as many of you probably think this is small but it's big to me. So here is the final piece. after the update I did above, you have to do all your next steps INSIDE the promises THEN statement.

So, replace the displayPart(e) code in my example in the person.js class with the following:

displayPart(e){
    this.bodyData.getBodyPart(e.target.id).then(bp => {
        this.bp = bp;
        // Whatever code/functionality you plan to do with the body part next by using this.bp to access the collection.
    });
}

This returns a collection of the objects that match the id I sent in. WOOT! Problem solved. Hope this helps someone someday.

Answer 2

About arrow notations:

https://github.com/lukehoban/es6features#arrows

so you need:

var pairs = evens.map(v => ({even: v, odd: v + 1}));