I'd like to render son data received from server in a loop:
The data that I receive in json is like (seen in browser console):
fetched data is:
{projs: Array(10), page_number: 1, total_pages: 1}
page_number: 1
projs: Array(10)
0: {typ: 1, ttl: 'Ada gwgwe', slg: 'Ada-gwgwe', dsc: ' Qui qui voluptas bla', skls: Array(2), …}
1: {typ: 3, ttl: 'Aut magna consequatu', slg: 'Aut-magna-consequatu', dsc: 'Reiciendis nobis omn', skls: Array(1), …}
2: {typ: 2, ttl: 'Perferendis itaque p', slg: 'Perferendis-itaque-p', dsc: 'Perferendis velit a', skls: Array(1), …}
3: {typ: 1, ttl: 'Cumque sint maiores ', slg: 'Cumque-sint-maiores-', dsc: ' Rerum a nemo consequ', skls: Array(4), …}
length: 4
[[Prototype]]: Array(0)
total_pages: 1
My vue.js in a single page:
const vueApp = new Vue({
delimiters: ['${', '}'],
el: '#projs-container',
data: {
base_url: 'http://127.0.0.1:8080',
display: 'this is rendered fine',
projects: [],
projs: [],
},
created() {
// GET request using fetch with error handling
fetch("http://127.0.0.1:8080/projects-json")
.then(async response => {
const projects = await response.json();
console.log('fetched data is:', projects);
let projs = projects.projs;
// check for error response
if (!response.ok) {
// get error message from body or default to response statusText
const error = (data && data.message) || response.statusText;
return Promise.reject(error);
}
})
.catch(error => {
this.errorMessage = error;
console.error("There was an error!", error);
});
},
methods: {
});
HTML:
<div id="projs-container">
<p>Hello World. ${ display }</p>
<ul id="projs-loop">
<li v-for="p in projs" :key='projs.slg'>
${ p.ttl }
</li>
</ul>
But oddly, nothing is dislpayed in the loop. What is wrong here? How can i fix it?
You are not assigning the result from the fetch in the state. You are defining it locally with a let projs.
For being able to use it in the template you have to add the result to the state of your app.
const vueApp = new Vue({
delimiters: ['${', '}'],
el: '#projs-container',
data: {
base_url: 'http://127.0.0.1:8080',
display: 'this is rendered fine',
projects: [],
projs: [],
},
created() {
// GET request using fetch with error handling
fetch("http://127.0.0.1:8080/projects-json")
.then(async response => {
const projects = await response.json();
// check for error response
if (!response.ok) {
// get error message from body or default to response statusText
const error = (data && data.message) || response.statusText;
return Promise.reject(error);
}
console.log('fetched data is:', projects);
this.projs = projects.projs; // check this line here
})
.catch(error => {
this.errorMessage = error;
console.error("There was an error!", error);
});
},
methods: {
});I did not check the rest of the code but it should get you going