Данные axios GET отображаются как [undefined, undefined] в div

Я пытаюсь отобразить JSON-данные URL-адреса в браузере, но он отображается в div как undefined, undefined.. Когда я помещаю его ответ в console.info, появляется объект и его данные, поэтому между ним появляется какое-то несоответствие в консоли и в браузере. У меня появились остальные данные (другие вызовы 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.info('oComp', response.data.d.results); // --------- shows the object tree with all of the JSON data
        }).catch(function(err) {
            console.info(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.info(err);
        })


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

офис.js:

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

    }

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

Офисные данные JSON:

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

Данные axios GET отображаются как [undefined, undefined] в div

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
194
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, что результаты представляют собой массив, поэтому вы должны получить к нему доступ как:

response[0].office_number

и

response[0].floormap

Ничего себе, это сделало это --- я думал, что это будет гораздо более сложный ответ. Я использовал mattsComponent в качестве ориентира, не понимая, что на самом деле это отличается от того, чего я пытался достичь с помощью officeComponent. Спасибо!

Bodrov 01.03.2019 17:33

Другие вопросы по теме