javascript - Vue2 - HTTP - 对对象值的访问返回未定义
问题描述
我正在学习 VueJS 2.0，并且我试图在类似的情况下复制我实际使用 JS 所做的事情：向服务器发布请求，获取响应，然后存储和操作数据对象。IE
解析对象并将“base_TotalConsumptionKWH”的所有值存储在一个数组中
我的问题是我无法访问数据，因为它总是返回未定义。
下面你会发现我用来发出 POST 请求和操作数据的函数以及我从服务器获得的响应。
任何人都知道我应该做什么并且可以引导我找到解决方案吗？
非常感谢
功能
fetchData() {
const headerRequest = {
"Content-Type": "application/x-www-form-urlencoded",
"cache-control": "no-cache",
"Postman-Token": "6f535442-cd0a-4780-9372-9335bc84c888"
};
const dataRequest = {
// Data for the request and auth token
};
this.$http
.post(
"https://api-test.clearvuesystems.co.uk/api_v1/getAnalyiseTrendRestApi",
dataRequest,
{ headerRequest }
)
.then(
response => {
return response.json();
},
error => {
console.log("something went wrong");
}
)
.then(data => {
console.log(data);
Object.keys(data.value).forEach(array => {
Object.keys(array).forEach(arrayItem => {
ComparisonCost.push(arrayItem.ComparisonCost);
console.log(ComparisonCost);
});
});
});
}
响应 JSON
{
"0":{
"value": {
"1": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 1,
"year": 2018,
"base_StartDateWholeMonth": "2018-01-01",
"base_EndDateWholeMonth": "2018-01-31",
"base_TotalConsumptionKWH": 90958.20000000001,
"base_TotalCostExVAT": 8975.181360000006,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-01-01",
"comp_EndDateWholeMonth": "2018-01-31",
"comp_TotalConsumptionKWH": 47514,
"comp_TotalCostExVAT": 4665.033783000008,
"ComparisonKWH": 43444.20000000001,
"ComparisonCost": 4310.147576999998,
"ComparisonPercentKWH": 47.762818525432564,
"ComparisonPercentCost": 48.022958022989684
}
],
"2": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 2,
"year": 2018,
"base_StartDateWholeMonth": "2018-02-01",
"base_EndDateWholeMonth": "2018-02-28",
"base_TotalConsumptionKWH": 98014.59999999999,
"base_TotalCostExVAT": 9649.012121999993,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-02-01",
"comp_EndDateWholeMonth": "2018-02-28",
"comp_TotalConsumptionKWH": 51499.70000000001,
"comp_TotalCostExVAT": 5079.6203340000075,
"ComparisonKWH": 46514.89999999998,
"ComparisonCost": 4569.391787999985,
"ComparisonPercentKWH": 47.45711353206561,
"ComparisonPercentCost": 47.35605811481629
}
],
"3": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 3,
"year": 2018,
"base_StartDateWholeMonth": "2018-03-01",
"base_EndDateWholeMonth": "2018-03-31",
"base_TotalConsumptionKWH": 95047.20000000001,
"base_TotalCostExVAT": 9303.384390000003,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-03-01",
"comp_EndDateWholeMonth": "2018-03-31",
"comp_TotalConsumptionKWH": 49549.00000000001,
"comp_TotalCostExVAT": 4908.856188000009,
"ComparisonKWH": 45498.200000000004,
"ComparisonCost": 4394.528201999994,
"ComparisonPercentKWH": 47.86905874134114,
"ComparisonPercentCost": 47.23580170162133
}
],
"4": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 4,
"year": 2018,
"base_StartDateWholeMonth": "2018-04-01",
"base_EndDateWholeMonth": "2018-04-30",
"base_TotalConsumptionKWH": 67865.40000000001,
"base_TotalCostExVAT": 6793.280761999992,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-04-01",
"comp_EndDateWholeMonth": "2018-04-30",
"comp_TotalConsumptionKWH": 35570.50000000001,
"comp_TotalCostExVAT": 3552.5614930000083,
"ComparisonKWH": 32294.9,
"ComparisonCost": 3240.719268999984,
"ComparisonPercentKWH": 47.58669366127658,
"ComparisonPercentCost": 47.70477450494615
}
],
"5": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 5,
"year": 2018,
"base_StartDateWholeMonth": "2018-05-01",
"base_EndDateWholeMonth": "2018-05-31",
"base_TotalConsumptionKWH": 60591.39999999999,
"base_TotalCostExVAT": 6133.200416000003,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-05-01",
"comp_EndDateWholeMonth": "2018-05-31",
"comp_TotalConsumptionKWH": 36971.1,
"comp_TotalCostExVAT": 3689.9367740000075,
"ComparisonKWH": 23620.29999999999,
"ComparisonCost": 2443.263641999996,
"ComparisonPercentKWH": 38.982924969550126,
"ComparisonPercentCost": 39.83668356289361
}
],
"6": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 6,
"year": 2018,
"base_StartDateWholeMonth": "2018-06-01",
"base_EndDateWholeMonth": "2018-06-30",
"base_TotalConsumptionKWH": 59018.4,
"base_TotalCostExVAT": 6012.63405999999,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-06-01",
"comp_EndDateWholeMonth": "2018-06-30",
"comp_TotalConsumptionKWH": 38126.1,
"comp_TotalCostExVAT": 3806.6399840000104,
"ComparisonKWH": 20892.300000000003,
"ComparisonCost": 2205.99407599998,
"ComparisonPercentKWH": 35.39963807897198,
"ComparisonPercentCost": 36.68931210491768
}
],
"7": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 7,
"year": 2018,
"base_StartDateWholeMonth": "2018-07-01",
"base_EndDateWholeMonth": "2018-07-31",
"base_TotalConsumptionKWH": 69856,
"base_TotalCostExVAT": 7044.543480000005,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-07-01",
"comp_EndDateWholeMonth": "2018-07-31",
"comp_TotalConsumptionKWH": 45620.8,
"comp_TotalCostExVAT": 4534.806129000008,
"ComparisonKWH": 24235.199999999997,
"ComparisonCost": 2509.737350999997,
"ComparisonPercentKWH": 34.69308291342189,
"ComparisonPercentCost": 35.62668550666672
}
],
"8": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 8,
"year": 2018,
"base_StartDateWholeMonth": "2018-08-01",
"base_EndDateWholeMonth": "2018-08-31",
"base_TotalConsumptionKWH": 64291.4,
"base_TotalCostExVAT": 6499.826138000006,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-08-01",
"comp_EndDateWholeMonth": "2018-08-31",
"comp_TotalConsumptionKWH": 42775.399999999994,
"comp_TotalCostExVAT": 4276.4563150000085,
"ComparisonKWH": 21516.000000000007,
"ComparisonCost": 2223.3698229999973,
"ComparisonPercentKWH": 33.466373418528775,
"ComparisonPercentCost": 34.20660454287363
}
],
"9": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 9,
"year": 2018,
"base_StartDateWholeMonth": "2018-09-01",
"base_EndDateWholeMonth": "2018-09-30",
"base_TotalConsumptionKWH": 59688.4,
"base_TotalCostExVAT": 6044.662429999991,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-09-01",
"comp_EndDateWholeMonth": "2018-09-30",
"comp_TotalConsumptionKWH": 34832.899999999994,
"comp_TotalCostExVAT": 3479.3308350000098,
"ComparisonKWH": 24855.500000000007,
"ComparisonCost": 2565.3315949999815,
"ComparisonPercentKWH": 41.64209461134828,
"ComparisonPercentCost": 42.439617178092526
}
],
"10": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 10,
"year": 2018,
"base_StartDateWholeMonth": "2018-10-01",
"base_EndDateWholeMonth": "2018-10-31",
"base_TotalConsumptionKWH": 71110.8,
"base_TotalCostExVAT": 8822.500767999994,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-10-01",
"comp_EndDateWholeMonth": "2018-10-31",
"comp_TotalConsumptionKWH": 37339.999999999985,
"comp_TotalCostExVAT": 4317.601640999985,
"ComparisonKWH": 33770.80000000002,
"ComparisonCost": 4504.89912700001,
"ComparisonPercentKWH": 47.49039527047933,
"ComparisonPercentCost": 51.06147616716209
}
],
"11": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 11,
"year": 2018,
"base_StartDateWholeMonth": "2018-11-05",
"base_EndDateWholeMonth": "2018-11-30",
"base_TotalConsumptionKWH": 71893.00000000001,
"base_TotalCostExVAT": 8909.277705666656,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-11-05",
"comp_EndDateWholeMonth": "2018-11-30",
"comp_TotalConsumptionKWH": 34601.6,
"comp_TotalCostExVAT": 4016.6514930000003,
"ComparisonKWH": 37291.400000000016,
"ComparisonCost": 4892.626212666656,
"ComparisonPercentKWH": 51.870696729862445,
"ComparisonPercentCost": 54.91608157589195
}
],
"12": [
{
"base_SiteName": "5b98d5cfa0632a32027851d0",
"base_SiteID": "Birmingham NI",
"base_GasOrElectric": 1,
"base_MeterNumber": "1410294703003",
"month": 12,
"year": 2018,
"base_StartDateWholeMonth": "2018-12-01",
"base_EndDateWholeMonth": "2018-12-31",
"base_TotalConsumptionKWH": 85631.79999999999,
"base_TotalCostExVAT": 10497.040625464515,
"comp_SiteName": "5b4f1dc18f57bf05fbe03056",
"comp_SiteID": "Hammersmith",
"comp_GasOrElectric": 1,
"comp_MeterNumber": "1200050623351",
"comp_StartDateWholeMonth": "2018-12-01",
"comp_EndDateWholeMonth": "2018-12-31",
"comp_TotalConsumptionKWH": 41705.50000000001,
"comp_TotalCostExVAT": 4788.554291712896,
"ComparisonKWH": 43926.29999999998,
"ComparisonCost": 5708.486333751619,
"ComparisonPercentKWH": 51.296714538290665,
"ComparisonPercentCost": 54.38186377885918
}
]
}
}
解决方案
按照@Shilly 的提示，我终于设法获得了这些数据。我已经使用 Object.values 来读取其中的所有值（数组），然后进行迭代以推出所有数据。谢谢！
.then( data => {
Object.values(data["value"]).forEach(array => {
array.forEach(arrayItem => {
// do whatever you whant
});
});
});
推荐阅读
- java - 如何在不启动工作台的情况下恢复 Eclipse 更新
- upload - IBM WebSphere 集群中通过 IBM LoadBalancer 故障上传文件
- spring-mvc - 使用 Spring 重定向到 sso/login 的单页应用程序上的 Keycloak 身份验证：找不到页面
- javascript - Lightningcharts - 双击重置轴
- angular - 为什么选项卡不切换？
- java - 想要确保用户名是唯一的
- python - cookie 不在浏览器 django rest 中创建
- linux - RHEL 8.3 中的活动日志
- javascript - 无法从 Next.JS 中的节点“url”模块导入 URL 类
- python - wordnet 替代方法来查找单词之间的语义关系 python