Ways to showcase an array within another array using VueJS

I encountered an issue with an API call that returns its result as an array within an array. Each nested array contains card transactions that need to be displayed.

Upon examining the console output, I found:

Array [
  Object {
    "data": Array [
     
      Object {
       "id": 1035988,
        "amount": 1.5,
        "amount_confirmed": 0,
        ...
      },
      Object {
        "id": 1011990,
        "amount": 5,
        "amount_confirmed": 0,
       ...
      },
    ],
    "message": "Card transactions fetched successfully",
    "status": "success",
  },
  Object {
    "data": Array [
    
      Object {
        "id": 1011923,
        "amount": 10,
        "amount_confirmed": 0,
        ...
      },
      Object {
        "id": 10119234,
        "amount": 1.5,
        "amount_confirmed": 0,
      ...
      },
     
    ],
    "message": "Card transactions fetched successfully",
    "status": "success",
  },
]

I am currently struggling to display this data. I have attempted different methods, like the one below, but nothing seems to work:

 <nb-list-item v-for="cardTransactions in card_transactions" v-bind:key="cardTransactions.data.id">
<!--content-->
</nb-list-item>

Answer №1

Here is an example you can try

<nb-list-item v-for="cardTransactions in card_transactions" :key="cardTransactions.data.id">
  <template v-if="cardTransactions.data && cardTransactions.data.length > 0">
    <div v-for="(transaction, i) in cardTransactions.data" :key="cardTransactions.data.id + '-transaction-' + i">
      <p>
        <strong v-text="cardTransactions.message" />
        <div>
          {{transaction}}
        </div>
      </p>
    </div>
  </template>
</nb-list-item>

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

Tips for extracting parameters from a JSON String using JavaScript

When attempting to parse a JSON String, I am encountering an issue where the parsed value is coming up as undefined. You can view the code on this jsfiddle link. <input type="submit" onclick=testJSON() value="Test"/> <div i ...

Vertical alignment in material-ui's Grid component is not functioning as expected

I have been working on this code snippet to center a button both vertically and horizontally. However, it seems like the button is not positioned correctly along the vertical axis. Any advice or guidance would be greatly appreciated! Could someone assist ...

How much does it typically cost to implement external libraries into a project?

Here are some of the most commonly used front-end web development libraries: jquery-min.js (95.9 kB) angular.min.js (108.0 kB) bootstrap.min.css (113.5 kB) bootstrap-theme.min.css (19.8 kB) bootstrap-fonts (185.7 kB) bootstrap.min.js (35.6 kB) All in al ...

Is there a way to automatically close the modal in a Vue component after clicking the save button?

Here is my Vue component code: <template> <div ref="modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form> ...

OrbitControls in THREE.JS fail to function properly when a DOM Element is layered on top of the scene

I am attempting to position labels as elements with position:absolute; over a THREEJS scene. The issue arises when the mouse hovers over one of the labels (the red box in the example below), causing the events that trigger OrbitControls to be "halted" by t ...

"Angular fails to retrieve any data from JSON API, returning a blank response

My ng-repeat function is not returning anything, and as a beginner in Angular, I am struggling to identify the error. Despite thorough error checking, I can't seem to figure out what's going wrong here. (function() { var app = angular.module( ...

Rendering tables multiple times using VueJS

I need to display only 5 results from an API call, but currently getting more than that. I attempted using an index, but since it's conditional rendering and some results are skipped, the index isn't a viable solution. Is there a way to assign a ...

Is there a way to manually add route resolve data to a controller without using automatic injection?

Two routes in my application share a controller, but one route requires data to be resolved before the view loads while the other does not. Here is an example of the routing segments: ... when('/users', { controller: 'UsersCtrl', ...

Transmitting Filter Choices as an Object for Retrieving Multiple Values within an Angular Application

In my Angular application, I have a function that takes user selections for various filter types and sends a request to the API to retrieve filtered data based on those selections. Each filter type returns values in an array format, allowing users to selec ...

Is there a way to refresh my order hook in React JS?

I've been attempting to modify the values within my order hook, but for some reason, they aren't updating. I'm relatively new to React and can't figure out what mistake I might be making. Any insights? Take a look at my code snippet: ...

Guide on updating data within a file at a specific position using JavaScript

I am faced with a challenge involving a file containing the following data, Test.txt, <template class="get" type="amp-mustache"> <div class="divcenter"> /////Need to append data at this point///// </div> </template> ...

Utilize jQuery to track and record AdWords conversions

I have noticed a number of inquiries regarding tracking Adwords conversions with jQuery on this platform. However, it appears that there is no definitive solution yet. My attempt at recording a conversion involves the code below following the submission o ...

Utilizing Zustand state management with Next.js 13.4.12 for routing and server-side rendering, enhanced with local storage

My Zustand store code looks like this: import create from "zustand"; import { persist } from "zustand/middleware"; const useProjectStore = create( persist( (set) => ({ selectedProject: null, setSelectedProject: (pr ...

The Angular service "this" is altering the context of the window object

I must have made a mistake somewhere and I know I am overlooking something obvious. The aim is to create a service that provides basic authentication features such as login, logout, and checking if a user is logged in or not. Upon loading the page, I veri ...

Ways to detach event listener in Vue Component

One of my Vue2 components has a custom eventListener that I added in the mounted lifecycle hook. I am now trying to figure out the correct way to remove this listener when the component is destroyed. <template> <div> ... </di ...

Modify the tooltip of the selected item in an ng-repeat loop in AngularJS

Upon clicking an element, a function is executed which, upon successful completion, should change the tooltip of that specific element. Within an ngRepeat loop, I have multiple elements displaying the same tooltip. However, I only want to update the toolt ...

Having trouble updating the dropdown value in a React child component

There are two main components in my code: App component: class App extends Component { constructor(props) { super(props); this.state = { selectedScale: "WholeTone" }; this.handleScaleSelect = this.handleScaleSelect.bind(this); } ...

The power of Three.js comes alive when utilizing appendChild and returning elements

I recently encountered an interesting issue that I managed to resolve, but out of sheer curiosity, I would love for someone to shed some light on why this problem occurred. Below is the snippet of my HTML code: <!DOCTYPE html> <html> < ...

Maximizing React Performance: Strategies for Avoiding Unnecessary Renderings on State Updates

I am facing a major performance issue due to constant re-rendering of my child components on every state change. I need a solution to prevent this from happening and maintain the stability of my application. Any suggestions or guidance would be highly ap ...

Having trouble getting the on:dblclick event to trigger on a row within a list using S

I am currently using Sveltestrap and I am in need of a double click handler for a row: <ListGroupItem on:dblclick={handler(params)}> <Row> <Col><Icon name=........</Col> ... </Row> </ListGroupItem> Int ...