VueJS array returns length = 0

Question

I have created an array in my VueComponent.

When I run a console.log(myArray.length) it says "0", however if I run a console.log(myArray) it shows that the array has the expected data. Check the screenshot from console below. The first part shows myArray, the second is myArray.length (circled in red)

See screenshot

Here is my current code:

   Vue.component('invoice-archive', {
    data: function () {
                return {
    invoices: [],
      }
    },
    created() { 
       this.myUpdateMethod();
    },
    methods:{
      myUpdateMethod: function(){
          var $this = this;
          let data = { 'id': installationId };

          this.getAjax('myUrlHere', data).then(function (result) {  
            if(!result.length ) return; // <-- This was the problem
            $this.invoices.push(JSON.parse(result));
    console.log($this.invoices); // This shows the expected content of my array
console.log($this.invoices.length); // This shows 0
        }); 
      },
       getAjax(url, data, success) {

                return new Promise(function (resolve, reject) {

                    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

                    xhr.onload = function () {

                        resolve(this.responseText);
                    }

                    xhr.onerror = reject;

                    xhr.open('POST', url);

                    xhr.setRequestHeader('Content-Type', "application/json;charset=UTF-8");

                    xhr.send(JSON.stringify(data));               

                });
            },
    });

tony19 · Accepted Answer · 2022-07-15 04:22:20Z

2

That is because when you are resolving the promise with this.responseText, you are passing a string into it. You will need to convert the response to JSON first, i.e.:

resolve(JSON.parse(this.responseText));

Since you're using VueJS, you might want to consider using axios instead of rolling your own AJAX request handler: https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

edited Jul 15, 2022 at 4:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 25, 2019 at 10:10

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sjobi Over a year ago

My bad..I already had this, but hadn't added it to my question. Updated the question now with the code. The result is still the same however even with the JSON.parse() :/

Terry Over a year ago

@Sjobi Can you create a minimal, concrete, and verifiable example? Can you share what result actually look like? I've tested your code and it seems to work fine.

Collectives™ on Stack Overflow

VueJS array returns length = 0

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related