v-for loop does not render array

Question

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 doing anything with let projs = projects.projs; you assign it to the newly reated projs variable and that's that. You should probably add it to smth like a state — Cornel Raiu
– Cornel Raiu, Commented Sep 10, 2021 at 17:57
instead of let projs = projects.projs; you should probably do this.projs = projects.projs. And you should only assign it after checking the response code — Cornel Raiu
– Cornel Raiu, Commented Sep 10, 2021 at 17:59
Yes, this.projs = projects.projs solves the probem. Just wonderin why can't I use projects.projs directly in the v-for loop? — MBH
– MBH, Commented Sep 10, 2021 at 18:04

Cornel Raiu · Accepted Answer · 2021-09-10 18:07:19Z

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

Collectives™ on Stack Overflow

v-for loop does not render array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related