Доступ к массиву внутри объекта JSON с использованием Axios Vue JS

ProgramBox

Доступ к массиву внутри объекта JSON с использованием Axios Vue JS

Post author:admin
Запись опубликована:25 марта, 2023
Post category:Вопросы по программированию

#javascript #json #vue.js #axios

Вопрос:

Мне нужно получить доступ к массивам внутри объекта 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

      

  });

1. Если вы можете получить res.data.endDate , почему вы не сможете получить res.data.timeBands ? И первым объектом в этом массиве является res.data.timeBands[0] , а идентификатор первого временного диапазона — res.data.timeBands[0].timeBandId Итак, в чем ваш вопрос?

2. @derpirscher Конечная дата Конечная дата просто поле, не отображаемое. но временные диапазоны — это массив. Я думаю, вы допустили ошибку. пожалуйста, проверьте это внимательно

3. в ответе, который вы показываете res.data.timeBands , есть массив. Вы знаете, как получить доступ к элементам массива? Если нет, вам следует начать изучать основы developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…

4. Да, timeBands это массив. Итак, почему вы не сможете получить доступ к нему или элементам в массиве? Что вы хотите поместить в this.timeBandValues ?

5. Из приведенного выше кода вы должны иметь возможность обычного доступа к массивам. Возможно, проблема в другом. Это timeBandValues определено где-то в ваших компонентных данных? Также попробуйте ведение журнала консоли для перекрестной проверки

Ответ №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"]
// ...

1. Мне нужен весь массив: this.timeBandValues = [ { «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″ } ]

2. @HashanR и это именно то, что this.timeBandValues = res.data.timeBands делает.

3. Да, мне нужно получить точный массив, не нужно фильтровать или что-либо делать. проблема в том, что я не могу его получить. Я мог бы получить все другие значения, но ни один из массивов.

4. Вы уверены, что у вас правильное имя свойства? Может быть, это не содержится в ответе? Если есть свойство с именем timeBands в res.data , вы можете получить его через res.data.timeBands , независимо от его типа. Вы пробовали отлаживать и проверять res.data объект, действительно ли он содержит timeBands свойство?

5. Да, у меня есть правильные имена, я мог бы получить другие данные без каких-либо проблем, и даже оператор консоли не печатается, я не знаю причины. Благодарю за вашу любезную поддержку! Я все еще ищу, что пошло не так