axios GET data appearing as [undefined, undefined] in div

I'm trying to render a url's JSON data in the browser, but it's appearing in the div as undefined, undefined. When I put its response in console.log the object and its data appears, so there's some sort of disconnect between it appearing in the console and the browser. I've gotten the rest of my data (other REST calls) to appear, but until I fix this problem I won't be able to see them and continue with my project.

Any thoughts on this? I've been struggling with getting this data for a while and it's been bugging me.

PS - Not sure if it helps, but I'm using IE11 with this one (not that I want to, but I have little say in the matter).

index.js:

import axios from 'axios';

import officeComponent from './SiteAssets/scripts/office.js' // --- trying to put data here
import mattsComponent from './SiteAssets/scripts/matt.js'
import bioComponent from './SiteAssets/scripts/bio.js'

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {
    queryDict[item.split("=")[0]] = item.split("=")[1]
});


axios.all([
    // Firm Directory
    axios.get(__[redacted].[redacted] + "/[redacted]/Odata/Odata.ashx/HSJS20FirmDirectory?hsf=@UserName=" + queryDict.uname + "&$select=PreferredName,...otherinfo...,SPID", {
        withCredentials: true,
        headers: {
        "Accept": "application/json; odata=verbose",
        "Content-Type": "application/json"
        }
    }),
... // ---------- other GET requests

]).then(axios.spread((firm, bio, edu) => { // params order is important (firmData, bioData, etc. must follow that order)

    let firmData = firm.data.d.results[0];
    let bioData = bio.data.d.results[0];

        // Office Info (relies on Firm Directory (firmData) SPID)
        axios.get(__[redacted].[redacted] + "/[redacted]/Odata/Odata.ashx/OFM_Resources?$select=FloorMap,FloorMapID,ResourceLocation,Office,OfficeID,Office_Number&hsf=@ResourceType=Person%20AND%20User_Link_ID=" + firmData.spid + "&hso=OfficeID", {
            withCredentials: true,
            headers: {
            "Accept": "application/json; odata=verbose",
            "Content-Type": "application/json"
            }
        })
        .then(function(response) {      
            let oComp = new officeComponent(response.data.d.results);
                oComp.loadOfficeData(response.data.d.results);  
                console.log('oComp', response.data.d.results); // --------- shows the object tree with all of the JSON data
        }).catch(function(err) {
            console.log(err);
        }),

// Matts Info (relies on Bio TK number)
        axios.get(__[redacted].[redacted] + "/[redacted]/Odata/Odata.ashx/MattsTeams?hsf=@MattStatus=active,pending%20AND%20TkNumber=%27" + bioData.number + "%27", {
            withCredentials: true,
            headers: {
            "Accept": "application/json; odata=verbose",
            "Content-Type": "application/json"
            }
        }).then(function(response) {      
            let mComp = new mattsComponent(response.data.d.results);
                mComp.loadMattsData(response.data.d.results);   
        }).catch(function(err) {
            console.log(err);
        })


let bComp = new bioComponent();
    bComp.loadBioData(bioData);
    bComp.loadEduData(eduData);

office.js:

import $ from 'jquery';
// ------------------- //
console.log("office.js working")
export default class {
    constructor() {

    }

    loadOfficeData(response) {
        $("#seat-val").append(response.office_number + ", " + response.floormap);  
    }   
}

Office Data JSON:

{
  "d": {
    "results": [
      {
        "floormap": "[location here]",
        "floormapid": 10,
        "resourcelocation": "[redacted]",
        "office": "[location here]",
        "officeid": 3,
        "office_number": "00-605"
      }
    ]
  }
}

Solution

Looks like results is an array, so you must access it as:

response[0].office_number

and

response[0].floormap