I got stuck with a get call Vue Js

Question

I am using Vue.js with Element UI. I have to fill up a table yet I got stuck with the following error:

Expected Array, got Object.

I understand that the 'get' call is returning a single Promise object. I tried to print that object out to see how to reach the array. It is inside [[PromiseValue]] and I do not know how to access it. I have seen the answer on this post: What does [[PromiseValue]] mean in javascript console and how to do I get it. But it did not seem right to me accessing it in that way, as it is a private property. So I am searching for a standard solution. This is my first project with vue.js. I used Angular 2-4 before and I just needed to do response.json()._embedded.customers

The Get call:

    this.$http.get('http://localhost:8080/customers')
    .then(response => {
      // JSON responses are automatically parsed.
      this.customersArray = response.json();
      console.log(response.json());
    })
    .catch(function(err) {
      return {
        name: 'default user'
      };
    })

The response.json() object:

In brief, I need the customers array under _embedded. For the crud, vue resource is being used.

Edit: I tried even to resolve it as follows, but I got the same result as on the screenshot:

    var promise1 = new Promise((resolve, reject) => {
      Vue.http.get('http://localhost:8080/customers').then((response) => {
        resolve(response.json());
      }, (response) => {
        reject(response.status)
      })
    });
    console.log(promise1);

Thank you for your time.

Have you simply tried `this.customersArray = response.json()['_embedded']['customers']` ? — Hipny, Nov 09 '17 at 15:55
I tried as you said, it does not give me any error but quits from the method. I mean, right after I assign it to the customersArray, it does not read the console.log(...) which I tried to print out response.json()['_embedded']['customers']. Neither fills up the table. — Red fx, Nov 09 '17 at 15:59
Promises are asynchronous, meaning, that when your console.log is executed, the request will probably not be finished yet. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise — Hipny, Nov 09 '17 at 16:02

score 0 · Accepted Answer · answered Nov 09 '17 at 16:20

I had to read the body of the response to be able to reach the objects I needed. I have resolved it in the following way:

        this.$http.get('http://localhost:8080/customers')
        .then(response => {
          // JSON responses are automatically parsed.
          this.customersArray = response.body._embedded.customers;
        })
        .catch(function(err) {
          return {
            name: 'default user'
          };
        })

I don't know why there wasn't any section 'body' on the inspector, I generally reached the things via printing out the whole object then following the path through as on the inspector. But anyway. =)

Edit: I cannot accept my own answer for 2 days, sorry for the inconvenience.

I got stuck with a get call Vue Js

1 Answers1