This is my first time using Glimmer. Its pretty cool and I'm just enjoying using it. That being said, I'm not really sure why but I keep getting an untracked error for the filtered property. I'd really appreciate any advice or help. :)
export default class DoggyAppGlimmer extends Component {
@tracked dogHouse = [];
@tracked filterValue = '';
didInsertElement() {
fetch('https://dog.ceo/api/breeds/list/all').then((response) => {
return response.json();
})
.then((data) => {
Object.keys(data.message).map((breed) => {
fetch(`https://dog.ceo/api/breed/${breed}/images/random`).then((response) => {
return response.json();
})
.then((image) => {
this.dogHouse = [
...this.dogHouse,
{
breed,
image: image.message,
filtered: false
}
];
});
});
});
}
filterHandler(e) {
this.filterValue = e.target.value;
this.dogHouse = this.dogHouse.map(dog => {
if (dog.breed.indexOf(this.filterValue) > -1) {
return Object.assign(dog, {
filtered: true,
});
} else {
return Object.assign(dog, {
filtered: false,
});
}
});
console.log(this.dogHouse);
}
The Template
<div>
dog house
<input
value={{filterValue}}
placeholder="Find a doggo"
onkeyup={{action filterHandler}}
/>
{{#each dogHouse key="@index" as |dog|}}
{{#if dog.filtered }}
<div>
<h1>{{dog.breed}}</h1>
<img src={{dog.image}} alt={{dog.breed}} />
</div>
{{/if}}
{{/each}}
</div>
my error :-(