I am currently working on a LitElement project and have successfully added JSON data to the category.items property using the following code:
fetchItems(category) {
if (!category || category.items) {
return;
}
this.getResource({
url: 'data/' + category.name + '.json',
onLoad(e) {
category.items = JSON.parse(e.target.responseText);
},
});
}
getResource(rq) {
let xhr = new XMLHttpRequest();
xhr.addEventListener('load', rq.onLoad.bind(this));
xhr.open('GET', rq.url);
xhr.send();
}
}
However, I encountered an issue when trying to access the Items property in another component.
The code snippet I used to retrieve the data is as follows:
handleCategoriesChanged(e) {
this.categories = e.detail.categories.value;
if(this.location != undefined){
for(let i=0; i < this.categories.length; i++){
if(this.location.params[0] == this.categories[i].name){
this.item = this.categories[i];
}
}
console.log(this.item);
console.log(this.item.items);
console.log(JSON.stringify(this.item, null, 2));
console.log(this.item.items);
}
When checking the console.log output in Chrome, I noticed that although the object was being called and the items property was visible, I was unable to access it directly. I attempted using the JSON.stringify method as well, but still couldn't access the items property. I searched for similar issues on this site, but couldn't figure out what went wrong in my case.