Arrow function on Aurelia with a json file Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Arrow function on Aurelia with a json file without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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.

We are here to answer your question about Arrow function on Aurelia with a json file - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji