Apiary API endpoint returning null data when called from web

Question

I have a mock API in Apiary where if I hit my endpoint with cURL or just in the browser, it returns:

[
{
  "id": 1,
  "user_id": 1,
  "status": "Review"
  "name": "New York Songwriter",
  "negotiable": true,
  "description": "",
  "created_at": "2015-02-09T02:29:58 +08:00",
  "modified_at": "2015-02-17T05:30:17 +08:00"
},
{
  "id": 2,
  "user_id": 1,
  "status": "Accepted"
  "name": "Licensing Contract",
  "negotiable": false,
  "description": "Third party licensing agreement",
  "created_at": "2015-02-09T02:29:58 +08:00",
  "modified_at": "2015-02-17T05:30:17 +08:00"
}
]

I have a React app where I'm hitting this endpoint with axios in a function that is called in componentWillMount:

  componentWillMount() {
    this.loadItems();
  }

  loadItems() {
    var self = this;
    axios({
      url: ENDPOINT,
      method: 'get',
      responseType: 'json'
    })
    .then(function(r) {
      console.log(r);
      var d = r.data;
      self.setState({
        agreements: d
      });
    })
    .catch(function(r) {
      console.log(r);
    });
  }

The console.log I get a status 200 in the response, but data is null. What am I doing wrong?

@CassidyWilliams what does `console.log(r)` return I feel like `console.log(r[0])` will return useful data — Jonathan Portorreal, Mar 06 '17 at 06:10
@JonathanPortorreal `console.log(r[0])` returns `undefined` and `console.log(r)` returns `{"data":null,"status":200,"statusText":"OK","headers":{"content-type":"application/json"},"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*"},"method":"get","url":ENDPOINT ,"responseType":"json"},"request":{}}` — Cassidy, Mar 06 '17 at 06:19
try to use the alias: `axios.get(url).then(response=> console.log(response, response.data)).catch(error=>console.log(e))` — Mayank Shukla, Mar 06 '17 at 06:34
@CassidyWilliams the way you were using is the custom way (providing the configuration manually), may be you need to define few more properties, this alias provide all the required configuration, so you don't need to worry about the get configuration, glad it helped you :) — Mayank Shukla, Mar 06 '17 at 07:44

score 0 · Accepted Answer · answered Mar 06 '17 at 07:59

Thanks to Mayank Shukla for the answer in the comments. The key is to use the native axios GET method, like so:

axios.get(ENDPOINT)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Because the native GET has all the properties built in. In my example I hadn't defined all necessary properties.

Thanks again, Mayank!

Apiary API endpoint returning null data when called from web

1 Answers1