I am looking to retrieve data from a JSON API based on the id in the URL of the page. First, I have the code for my table which contains links based on a URL id that leads to the template of the second table:
<table class="table table-condensed">
<tr style="text-align:left;" v-for="data in metadata">
<td>{{data.id}}</td>
<td><router-link :to="{ name: 'mixtapesDetails', params{id : data.id}}">
{{data.title}}
</router-link></td>
<td><router-link :to="{ name: 'mixtapesDetails', params{id : data.id}}">
{{data.artist}}
</router-link></td>
</tr>
</table>
Here is the second table where I only want to show data based on the ID:
<div style="margin-left:400px;">
<div>{{$route.params.id}}</div>
<table class="table table-condensed">
<tr>
<th>ID</th>
</tr>
<tr style="text-align:left;" v-for="data in metadata">
<td>{{data.id}}</td>
<td>{{data.title}}</td>
<td>{{data.artist}}</td>
<td>{{data.cover}}</td>
</tr>
</table>
</div>
Next, I have a JavaScript function to fetch all the data:
export default {
data(){
return {
metadata: null
}
},
methods:{
httpGet(theUrl){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // true for asynchronous request
xmlHttp.send(null);
console.log(JSON.parse(xmlHttp.responseText));
return JSON.parse(xmlHttp.responseText);
}
},
mounted(){
this.metadata = this.httpGet("urltooJsondata");
}
}
Lastly, here are my routes in JavaScript:
export default new VueRouter({
routes: [
{
path: '/mixtapeList',
name: 'mixtapeList',
component: mixtapeList
},
{
path: '/mixtapesDetails/:id',
name: 'mixtapesDetails',
component: mixtapesDetails
}
]
})
The goal is to click on a router-link which will lead to a single page with a URL like /mixtapesdetails/id, and the data displayed on that page should correspond to the URL id. I am struggling to find a solution online and would appreciate any help.
Any guidance or assistance would be greatly appreciated.