"data" field not populated in axios response from express server

I am trying to access data from a nodejs server using Express on the server and Axios on the backend.

This is the endpoing I am trying to reach: http://gentle-bastion-49098.herokuapp.com/api/filters

As you can see it actually returns data when you navigate to it. But when I try to access it using the following code:

const BASE_URL = 'http://gentle-bastion-49098.herokuapp.com/api'

function getFilterData () {
  const url = `${BASE_URL}/filters`
  return axios.get(url)
}
getFilterData()
        .then(function (response) {
          console.log('filter', response)
        })
        .catch(err => {
          alert('Could not get filters ' + err.message.toString())
        })

I get this response with the "data" field being unpopulated where I'm expecting it to contain the JSON you see in the URL.

{
    "data": "",
    "status": 200,
    "statusText": "OK",
    "headers": {},
    "config": {
        "url": "http://gentle-bastion-49098.herokuapp.com/api/filters",
        "method": "get",
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "transformRequest": [null],
        "transformResponse": [null],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1
    },
    "request": {}
}

Here is the back end code

const express = require('express');
const app = express();
const async = require('async');
const request = require('request');
const http = require('http');
const EventSource = require('eventsource');
const port = process.env.PORT || 8080;

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json()

app.get('/api/filters', function(req, res) {
    let filtersResponse = {
        "ID": "CONV_DATA@IVA",
        "ApplicationName": "InterationsView",
        "Type": "FILT_DETAIL",
        "filters": [{
                "Name": "ChannelType",
                "Values": uniqueFilters.ChannelType,
            },
            {
                "Name": "sessionType",
                "Values": uniqueFilters.sessionType,
            },
            {
                "Name": "Direction",
                "Values": uniqueFilters.Direction,
            },
            {
                "Name": "Status",
                "Values": uniqueFilters.Status,
            },
            {
                "Name": "statusReason",
                "Values": uniqueFilters.statusReason,
            },
        ],
        "minDuration": uniqueFilters.minDuration,
        "maxDuration": uniqueFilters.maxDuration,
        "minData": "2019-08-29T22:28:47.029UTC",
        "maxDate": "2019-08-29T22:28:49.578UTC"
    };

    // Respond with filters
    res.json(filtersResponse);
});

Any ideas as to why the data field is unpopulated even though when accessed through browser or postman it returns the desired data? Is it a problem with the back end or the way the request is being made? Thanks. I have also enabled cross-orgin resource sharing on my browser. Not doing so results in an error

2 answers

  • answered 2019-11-14 05:52 Saniya syed qureshi

    Try with these changes:

     getFilterData().then(response => {
              console.log('filter', response.data)
     })
      .catch(err => {
              alert('Could not get filters ' + err.message.toString())
     })
    

    In your server code, send the response back to client using res.send() as shown below:

     app.get('/api/filters', function(req, res) {
        let filtersResponse = {
            "ID": "CONV_DATA@IVA",
            "ApplicationName": "InterationsView",
            "Type": "FILT_DETAIL",
            "filters": [{
                    "Name": "ChannelType",
                    "Values": uniqueFilters.ChannelType,
                },
                {
                    "Name": "sessionType",
                    "Values": uniqueFilters.sessionType,
                },
                {
                    "Name": "Direction",
                    "Values": uniqueFilters.Direction,
                },
                {
                    "Name": "Status",
                    "Values": uniqueFilters.Status,
                },
                {
                    "Name": "statusReason",
                    "Values": uniqueFilters.statusReason,
                },
            ],
            "minDuration": uniqueFilters.minDuration,
            "maxDuration": uniqueFilters.maxDuration,
            "minData": "2019-08-29T22:28:47.029UTC",
            "maxDate": "2019-08-29T22:28:49.578UTC"
        };
    
        // Respond with filters
     res.send(
        filtersResponse
      )
     });
    

  • answered 2019-11-14 06:35 Vipulw

    I am not clear whether you are not getting axios response or response from your node server. If you have problem in getting axios response here is the code.

    I have used request npm for making a get request.

    const request = require('request');
    
    apiUrl = "http://gentle-bastion-49098.herokuapp.com/api/filters"
    
    request.get(
        {
            url: apiUrl,
            json: true
        },
        function (error, response, body) {
            if (error) {
                console.log("Error Occurred :", error);
            }
            console.log("Response Data :", body)
    
        }
    );
    

    The above code will give you response as :

    {
       "ID":"CONV_DATA@IVA",
       "ApplicationName":"InterationsView",
       "Type":"FILT_DETAIL",
       "filters":[
          {
             "Name":"ChannelType",
             "Values":[
                "Phone",
                "Web-Chat",
                "Google-Assistant"
             ]
          },
          {
             "Name":"sessionType",
             "Values":[
                "nlu-voice",
                "nlu-text"
             ]
          },
          {
             "Name":"Direction",
             "Values":[
                "In"
             ]
          },
          {
             "Name":"Status",
             "Values":[
                "Complete",
                "Started"
             ]
          },
          {
             "Name":"statusReason",
             "Values":[
                "END"
             ]
          }
       ],
       "minDuration":9.7,
       "maxDuration":154.2,
       "minData":"2019-08-29T22:28:47.029UTC",
       "maxDate":"2019-08-29T22:28:49.578UTC"
    }
    

    which is same as what you get in browser when you visit the link http://gentle-bastion-49098.herokuapp.com/api/filters

    If you are using axios the code will be :

    const axios = require('axios');
    
    apiUrl = "http://gentle-bastion-49098.herokuapp.com/api/filters"
    
    axios.get(apiUrl)
        .then(function (response) {
            console.log("Response Data :", response.data);
        })
        .catch(function (error) {
            console.log("Error Occurred :", error);
        })
    

    and it will give same response as above.

    Even your written code is giving response :

    Response Screenshot