Search code examples
javascriptarraysrestvuejs2vue-resource

I got stuck with a get call Vue Js

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: img

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.

Solution

  • 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.