javascript - axios GET 数据在 div 中显示为 [未定义, 未定义]

Question

我正在尝试在浏览器中呈现网址的 JSON 数据，但它在 div 中显示为 undefined, undefined .当我将其响应放入console.log时对象及其数据出现，因此它出现在控制台和浏览器中之间存在某种脱节。我已经显示了其余的数据(其他 REST 调用)，但在解决此问题之前，我将无法看到它们并继续我的项目。

对此有什么想法吗？一段时间以来，我一直在努力获取这些数据，这一直困扰着我。

PS - 不确定它是否有帮助，但我正在将 IE11 与此一起使用(不是我想要的，但我在这件事上没有什么发言权)。

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 数据 JSON:

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

Answer 1

看起来结果是一个数组，因此您必须按以下方式访问它:

response[0].office_number

和

response[0].floormap