Creating multi-dimensional arrays using array lists with Axios and Vue.js

My knowledge of axios and JavaScript is limited, and I find myself struggling with creating a multi-dimensional array.

1. This is how I want my data to be structured :

https://i.stack.imgur.com/kboNU.png

userList: [
                    {
                        user_no: 1,
                        user_nickname: "hailey",
                    },
                    {
                        user_no: 2,
                        user_nickname: "mandi",
                    },
                    {
                        user_no: 3,
                        user_nickname: "loren",
                    },
                    {
                        user_no: 4,
                        user_nickname: "james",
                    },
],

2. However, the axios response I'm receiving looks like this :

https://i.stack.imgur.com/q2L21.png

{user_no : 1, user_nickname : "hailey"}
{user_no : 2 , user_nickname : "mandi"}
{user_no : 3 , user_nickname : "loren"}
{user_no : 4 , user_nickname : "james"}

I need help figuring out how to wrap these individual lists into a multi-dimensional array so that I can achieve structure #2 -> #1. I have come across functions like flat which do the opposite of what I need. Is there any other way to wrap all arrays within an outer array?

javascriptarraysvue.jsmultidimensional-arrayaxios

Answer №1

There doesn't seem to be any issues with the axios response that you are receiving. The v-data-table requires an array for iteration, which is exactly what you are getting from the API response.

Check out the Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    dataList: [{
            "user_no": 1,
            "user_nickname": "hailey"
    },
    {
      "user_no": 2,
      "user_nickname": "mandi"
    },
    {
      "user_no": 3,
      "user_nickname": "loren"
    },
    {
      "user_no": 4,
      "user_nickname": "james"
    }]
  }),
  computed: {
    gridHeaders() {
      return [
        { text: "User Number", value: "user_no" },
        { text: "User Nickname", value: "user_nickname" }
      ];
    },
  },
})
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7107041431435f09">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbab9a9b8a5aab58cfee2f9e2fc">[email protected]</a>/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
    <v-data-table :headers="gridHeaders" :items="dataList" item-key="user_no">
    </v-data-table>
</div>

Answer №2

I made a foolish mistake. Just like the previous response indicated, there is no issue with my data or code. The problem arose when I was fetching data, as the objects were nested within the data structure, resulting in something like this :

response.data.data //I mistakenly referred to it as response.data ^^:;

Many thanks for your assistance :D

https://i.stack.imgur.com/abcdE.png

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

Delivery person receiving biscuit but my internet browser doesn't seem to be getting it when I attempt to retrieve it

Currently, I am in the process of creating a website using Flask and React. The user is required to input an email and password on a form, which is then sent via axios.post to the backend. The backend checks if the email and password match with the databas ...

javascriptreactjsflaskcookiesaxios

JQuery does not operate on content that is fetched through ajax requests

I've been struggling with this issue for quite some time now and I just can't seem to figure out what I'm doing wrong. (I suspect it's related to the ajax response) I attempted to upload an image to the server using the uploadifive plu ...

javascriptphpjqueryajax

Is there a way I can set a variable as global in a jade template?

I am trying to pass a global object to a jade template so that I can use it for various purposes later on. For instance: app.get("/", function(req, res){ var options = { myGlobal : {// This is the object I want to be global "prop ...

javascriptnode.jsexpresspug

How to dynamically generate data with exceljs

Currently, I am attempting to download JSON data into an Excel spreadsheet. One of my requirements is to insert an image in cell a1 and then bold the headers. The code snippet below was sourced from Google; however, I need to populate the data dynamically ...

javascriptjsonexcelnpmexceljs

Connect various models together, or create synchronized computed properties

At times, the model abstraction may fall short, leading to the necessity of synchronizing two different models. For instance, I have two lists linked by an angular sortable, which requires a model structure like this: left = [{name:"one"}, {name:"two"}]; ...

javascriptangularjs

Using perl ajax to modify a table

In my current Perl script, I am working on a functionality where I retrieve data from an xls file and display it as input text on a webpage. The objective is that when a user selects the edit option from a menu, the entire table fetched from the xls file w ...

javascriptajaxperlunixcgi

Implementing a string replacement within an array of objects using TypeScript

I have a collection of array objects displayed below [ { "subjectID": 1 "Chosen" : "{subjectsChosen:Python,java,Angular}" "password": "{studentpw:123456abcd}" }, { "subjectID": 2 ...

arraysjsonangulartypescriptjavascript-objects

I am having trouble getting the Audio Code (a very basic code) to function properly

<audio id="myAudio" src="Avengers.mp3" type="audio/mpeg"></audio> <script> window.onload = function(){ document.getElementById('myAudio').play() } </script> Recently experimenting with some code in NotePad, a friend had ...

javascripthtml

Encounter an error when reading a stream with a maximum timeout value set

I have encountered a challenge while trying to read and process large CSV files. Due to a rate limit in processing, I need to introduce a 1-minute delay between each request. Initially, I attempted to use set timeout, but discovered that there is a limitat ...

javascriptnode.jsloopssettimeoutdelay

Transferring data between AngularJS and non-AngularJS environments

Within my AngularJS application, the $scope.mydata variable holds some important data within a controller. I am currently working on a regular JSP page without any AngularJS functionality, but I need to access the data stored in the scope variable (mydat ...

javascriptangularjsjspangularjs-scope

Having trouble locating the componentwillunmountafterInteraction in the React Native deck swiper

I've been utilizing react native deckSwiper in my project, but I'm having trouble unmounting it from the screen due to an error that says "ReferenceError: Can't find variable componentWillUnmountAfterInteractions". The error stack trace is s ...

javascriptreactjsreact-native

Displaying tooltips dynamically for newly added elements all sharing a common class in React

I'm facing an issue with the primereact tooltip component from . Everything seems to be working fine except for the target property. When I have multiple elements on a page with the same class, the tooltip works as expected. However, when I add a new ...

javascriptreactjstooltipdynamically-generatedprimereact

My goal is to send distinct entries for each user that accesses the system from a MySQL database

As a beginner, I need help figuring out how to send each logged-in user a list of unique records from the database. I want to ensure that no duplicate records are sent to different users. How can I achieve this? Below is the code snippet responsible for ...

javascriptmysqlnode.jsexpresssequelize.js

Tips for effectively utilizing MeteorPad: (Note: ensure to use at home instead of at work due to potential firewall or proxy issues)

UPDATE: It's possible that the issue is related to a firewall or proxy. MeteorPad doesn't work at my workplace, but it works fine at home. I've been attempting to use MeteorPad () but I'm encountering some difficulties. The bottom are ...

javascriptmeteor

Having trouble with innerHTML.value functionality?

Recently, I've been delving into creating a JavaScript program that fetches Wikipedia search results. Initially, everything seemed to be working fine as I was able to display the searched item using the alert() method. However, for some reason, it now ...

javascriptjqueryhtmlajax

The React-Toastify module is missing

Having issues with react toast plugin displaying an error. Prior to attempting to use the toast feature, I executed this command: npm install --save react-toastify The following error is being shown in Google Chrome Console: ERROR in ./src/Pages/Login ...

javascriptreactjs

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

javascripthtmljquerycsshtml5-canvas

Encountering a surprising token error while running a node.js application with a classic example

I downloaded node.js from its official website and followed the instructions provided here. I attempted to run the example code snippet from the "JavaScript - The Good Parts" textbook: var myObject = { value: 0; increment: function (inc) { this.value ...

javascriptnode.js

What is the best way to transfer information from the window method to the data function in a Vue.js application?

Is there a way to transfer information from the window method to the data function in a vuejs component? Take a look at my window method: window.authenticate = function(pid, receiptKey) { console.log("Authentication"); console.log(this) localStorag ...

javascripttypescriptvue.jsvuejs2

Can I deactivate JavaScript on my website directly from my server settings?

I'm currently attempting to link my Android application to a PHP script hosted on a free server. However, when my app tries to access the page, I receive an HTML message stating that JavaScript is disabled and needs to be enabled in order to view the ...

javascriptandroidweb-hosting