Greetings, I am a beginner in NativeScript-Vue and JavaScript. I do not have extensive experience with heavy Javascript coding. I am facing an issue with displaying data fetched from an API in CardViews. Below is the code snippet I attempted:
<template>
<Page >
<ScrollView>
<StackLayout padding="5" for="item in cardList">
<CardView ripple="true" elevation="10" padding="5" margin="15" height="150">
<StackLayout>
<Image :src="'http://URL' + item.endpoint_link_1" stretch="aspectFit" height="120"/>
</StackLayout>
</CardView>
<CardView ripple="true" elevation="10" padding="5" margin="15" height="150">
<StackLayout>
<VideoPlayer :src="'http://URL' + item.endpoint_link_2" controls="true" stretch="aspectFill" autoplay="false" height="120"/>
</StackLayout>
</CardView>
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
import * as http from "http";
export default {
data() {
return {
cardList: []
};
},
mounted() {
http.getJSON("http://URL").then(result => {
this.cardList = result.results;
console.log(result); #This displays the results in the log confirming functionality.
console.log(cardList); #Doesn't show anything in the log
}, error => {
console.log(error);
});
};
</script>
The structure of my JSON data is as follows:
[
{
"endpoint_link_1": "/default/files/image.jpg",
"endpoint_link_2": ""
},
{
"endpoint_link_1": "",
"endpoint_link_2": "/default/files/video.mp4"
}
]
When running the code, I encounter the error:
"TypeError: Cannot read property 'endpoint_link_1' of undefined"cardList is not properly populated or the loop for="item in cardList" might be at the incorrect location. Any assistance on this matter would be greatly appreciated.