使用 Axios Vue JS 访问 JSON 对象内的数组答案

【问题标题】：Access array inside JSON object using Axios Vue JS使用 Axios Vue JS 访问 JSON 对象内的数组
【发布时间】：2021-01-04 11:11:44
【问题描述】：

我需要访问 JSON 对象中的数组并保存到不同的数组中。我尝试了几种方法，但没有运气。我可以毫无问题地获取所有其他值，但是当涉及到数组时，我无法检索这些值。

我觉得我尝试访问 JSON 对象内的数组的方式可能是错误的，但我想不通

这里是 JSON 对象

{
   "packId":51,
   "shortCode":"TTY",
   "packDescription":"TTY Des",
   "startDate":"2020-09-01",
   "endDate":"2020-09-08",
   "validityValue":30,
   "validityType":"Hours",
   "expiryAction":true,
   "expirySMS":64,
   "activationSMS":64,
   "deactivationSMS":64,
   "subscriptionSMS":0,
   "deactivationAction":true,
   "deactivationShortCode":"DEACT TTY",
   "deprovisionOnExpiry":true,
   "deleteByPackType":true,
   "packType":{
      "packTypeId":2,
      "name":"Facebook"
   },
   "timeBands":[
      {
         "timeBandId":1,
         "start":"8:00",
         "end":"23:00",
         "timeBand":"8:00-23:00"
      },
      {
         "timeBandId":2,
         "start":"8:00",
         "end":"20:00",
         "timeBand":"8:00-20:00"
      }
   ],
   "activationTypes":[
      {
         "activationTypeId":1,
         "name":"SMS"
      },
      {
         "activationTypeId":2,
         "name":"Web"
      }
   ],
   "channels":[
      {
         "channelId":1,
         "name":"hShenid"
      },
      {
         "channelId":2,
         "name":"Genesis"
      }
   ],
   "users":[
      
   ]
}

Axios 调用

getPackById(id)
{
  return axios.get(`${API_URL}/pack/get/${id}`);
}

 refreshPack()
{
  
  PackComposeDataService.getPackById(this.id).then((res)=>
  {

      

      //I can access these values without any problem

      this.deleteByPackType= res.data.deleteByPackType,
      this.packTypeValues=res.data.packType,
      this.shortCode= res.data.shortCode,
      this.packDescription= res.data.packDescription,
      this.startDate= res.data.startDate,
      this.endDate= res.data.endDate,
      this.subscriptionSMS= res.data.subsNotificationValues["id"],
      this.validityValue= res.data.validityValue,
      this.validityType= res.data.validityType,
      this.actionOnExpiry= res.data.expiryAction,
      this.expirySMS= res.data.expiryNotificationValues,
      this.activationSMS= res.data.activationNotificationValues,
      this.deactivationAction= res.data.deactivationAction,
      this.deactivationShortCode= res.data.deactivationShortCode,
      this.deactivationSMS= res.data.deactivationNotificationValues,
      this.deprovisionOnExpiry= res.data.deprovisionOnExpiry,


      //I need to get these arrays
      this.timeBandValues= res.data.timeBands,
      this.activationTypes= res.data.activationTypes,
      this.channels= res.data.channels,
      this.users= res.data.users

      

  });

【问题讨论】：

标签： javascript json vue.js axios

【解决方案1】：

我了解您只想获取每个数组的 timeBand 字符串（或最终是 activationType）。

如果是这种情况，您可能希望map 将数组中的每个对象转换为简单字符串：

// ...
this.timeBandValues = res.data.timeBands.map(o => o.timeBand) // you're going to get ["8:00-23:00", "8:00-20:00"]
// ...

【讨论】：