I've been exploring Aurelia and delved into tutorials on PluralSight and Egghead.io, but I'm still struggling to resolve my current issue.
In a JSON file named bob.json, there is a collection of objects related to Bob. Each object in the collection has an ID. My goal is to use arrow notation to retrieve an object based on its ID. Here's what I have attempted 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 sections with ellipses are the areas where I am unsure about implementing the arrow function. My main questions revolve around understanding what should be placed in those spots to only return the object that matches the specific ID. Additionally, I am seeking guidance on resources explaining how to effectively utilize arrow notation with JSON data.
UPDATE:
After conducting some research, I came across a helpful explanation at:
From my understanding, arrow notation operates similarly to an SQL statement.
In the bodyData.js file, I utilized the following statement:
getBodyPart(id) {
return this.http.get(baseUrl).then(response => {
return response.content.filter(n => n.id == id);
});
}
As per my interpretation, this filters the returned content based on the object's ID matching the passed-in ID. It bears resemblance to how an SQL query would read:
SELECT [object]
FROM [json file]
WHERE [object].id = id
If my understanding is correct, then I believe I have grasped that part. However, the aspect that is currently perplexing me is the displayPart(e) function within the person.js file. How can I verify whether this data retrieval process is yielding the correct value? Any assistance provided will be greatly appreciated.