How to use Axios in Vue JS to access an array within a JSON object

Struggling to access arrays inside a JSON object and save them into separate arrays. Despite trying various methods, I have not been successful in retrieving these arrays.

I suspect that my approach to accessing arrays within the JSON object is incorrect, but I am unable to pinpoint the mistake.

Below is the JSON object:

{
   "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 Call

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

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

      

      //Values accessed without issues

      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,


      //Need assistance with retrieving these arrays
      this.timeBandValues= res.data.timeBands,
      this.activationTypes= res.data.activationTypes,
      this.channels= res.data.channels,
      this.users= res.data.users

      

  });

Answer №1

I see that you are interested in extracting the timeBand string from each array (or possibly the activationType).

If this is what you're looking for, you can use the map function to convert each object in the array into a simple string:

// ...
this.timeBandValues = res.data.timeBands.map(obj => obj.timeBand) // result will be ["8:00-23:00", "8:00-20:00"]
// ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Comparing sqlsrv_fetch_array with sqlsrv_fetch_object

Currently using PHP with both MS SQL Server 2005 and 2012. I'm curious about the variances between sqlsrv_fetch_array and sqlsrv_fetch_object functions. Can anyone help clarify? ...

Proper method for extracting and sending the final row of information from Google Sheets

The script I have is successfully formatting and sending out the information, but there is an issue. Instead of sending only the latest data, it is sending out each row as a separate email. I specifically want only the last row of data to be sent. functio ...

"Dilemma: Why won't the AJAX form post load inside the

Apologies for the simple question, but I'm experiencing an issue where nothing happens when the button is pressed. Any assistance would be greatly appreciated. AJAX $(document).on("ready", function(){ //Form action $("#wbForm").on("submit", function( ...

Guide to bringing in a variable from an external module

As a backend developer working on Node.JS code, I am trying to incorporate some constants from the @aws-sdk/signature-v4 module into my project. Specifically, I need to access AMZ_DATE_QUERY_PARAM as mentioned in the documentation. However, I am struggling ...

Rzslider not functioning properly due to CSS issues

I am facing an issue where rzslider is not appearing in my app. However, when I copy the code to an online editor, it works perfectly fine. Below is the code snippet: var app = angular.module('rzSliderDemo', ['rzModule', 'ui.boo ...

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

I'm in need of assistance on sorting a list of articles from an external json file based on their creation date. Can anyone provide guidance? Currently, I am fetching the data using AJAX and displaying only 6 results, but I'm facing difficulties ...

Should I utilize Sockets or Ajax for my project?

My Login Script Journey I have a goal in mind - to create a login script using Nodejs. I am currently exploring the options of utilizing sockets or ajax posts for this task. My Progress So Far I have Nodejs installed and have referenced this code in my ...

angular does not update dynamically created dropdowns with populated arrays

Upon loading the page, my initial dropdown functions correctly. However, the child dropdown is loaded from localstorage after the first dropdown. The issue arises when I load the second dropdown and set it to the default value - at this point, I am unabl ...

Searching for a property in a list using MongoDB Query

Suppose I have a document structured like the following: { _id: "cow", comments: [ {user: "karl", review: "I appreciate cows.", at: /*a certain date*/}, {user: "harry", review: "Cows are truly amazing.", at: /*a certain date*/} ...

The date format in AngularJS is not being displayed correctly according to the request

My goal is to retrieve the date in the format of dd/MM/yyyy and pass it along to my URI. However, I am encountering an issue where the date is not being passed in the requested format. Below is the snippet of my HTML code: <script type="text/ng-templat ...

A Beginner's Guide to Duplicating Bootstrap Containers in Jade

I am working with JSON data that is being transmitted from an Express and Mongoose Stack to be displayed on the user interface created in Jade. I am wondering which Jade Construct I should use to loop through a Bootstrap Container of col-md-4 using Jade s ...

What is the best way to run a lengthy task in Node.js by periodically checking the database for updates?

In my current setup, there is a routine that continuously checks the database for any pending work orders. Upon finding one, it needs to execute it promptly. The system can handle only one work order at a time, and these tasks may vary in duration from 5 s ...

Saving Information from Various MongoDB Searches on Node.js

Okay, I believe it would be more helpful if I provide my entire node.js route for you to better understand what I am trying to explain. The issue I am facing is with making multiple queries to my MongoDB database (one for each day). The queries are execut ...

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

Tips for designing a multi-level dropdown navbar

I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...

what strategies can be implemented to prioritize addressing validation errors in return forms

I'm currently working on a web application in asp.net mvc-5, and I have a contact form displayed in the middle of the Contact Us view. Here's the code snippet: <div class="col-sm-8 col-sm-push-4"> <h2>Contact Us1 ...

What are the methods used to optimize fetching on a React Gatsby website?

Within the Gatsby React setup of a website, there is a NavbarExtra component on the front page that displays dynamic data fetched from an API. This data refreshes multiple times throughout the day. The goal now is to optimize the fetching process in order ...

What causes an asynchronous function to exhibit different behavior when utilized in conjunction with addEventListener versus when manually invoked?

I was delving into the concepts of async and await keywords and decided to create a basic demonstration using an HTML file and a corresponding JS file. In my example, I defined two promises - promise1 and promise2. The handlePromises function uses async/ ...

alter information in a javascript document

Hey there, I've got a JavaScript array of URLs in my content.js file. I want to show these URLs in separate input boxes on a different page called display.php. Each input box will have edit and delete buttons. Any changes made by the user should updat ...

Optimizing Variable Destructuring Efficiency

Is there a difference in performance when assigning variables like const color = props.color; compared to destructuring like this const { color } = props; Furthermore, does destructuring within the parameters affect performance positively or negatively ...