Looking to cycle through arrays containing objects using Vue

Question

Looking to cycle through arrays containing objects using Vue

Within my array list, each group contains different objects. My goal is to iterate through each group and verify if any object in a list meets a specific condition.

Although I attempted to achieve this, my current code falls short of iterating through every individual object in the groups:

 for (i = 1; i <= this.portfolioDetails.length; i++) {

    for (var j = 1; j < this.portfolioDetails[i].length; j++) 
    {
       console.log(portfolioDetails[i][j]);
    }
 }

Here is a list of the array objects:

portfolioDetails:Array[3]
    0:Object
      ACCOUNTID:"S1001"
      ACCOUNTNAME:"Bla bla bla"
      ACCRUEDINTERESTALL:0
      PRICE:0.69
      UNITS:60.49
      VALUE:41.98
      product:null
    1:Object
      ACCOUNTID:"S1002"
      ACCOUNTNAME:"blo bla blo"
      ACCRUEDINTERESTALL:0
      PRICE:0.69
      UNITS:60.49
      VALUE:41.98
      product:null
    2:Object
      ACCOUNTID:"S1003"
      ACCOUNTNAME:"blik blik blik"
      ACCRUEDINTERESTALL:0
      PRICE:0.69
      UNITS:60.49
      VALUE:41.98
      product:null

javascript vue.js

Answer 1

Answer №1

The concept here involves basic JavaScript principles and is not directly related to VueJS. The issue with your iteration lies in the fact that you initialized i = 1 whereas, in programming, indexing typically starts at 0. Additionally, including the last number using the comparison operator <= is incorrect since arrays are zero-indexed. Instead, consider accessing object values by their respective keys for a more accurate approach:

for (let i = 0; i < this.portfolioDetails.length; i++) {
    console.log(this.portfolioDetails[i].ACCOUNTID)
}

Answer 2

The concept here involves basic JavaScript principles and is not directly related to VueJS. The issue with your iteration lies in the fact that you initialized i = 1 whereas, in programming, indexing typically starts at 0. Additionally, including the last number using the comparison operator <= is incorrect since arrays are zero-indexed. Instead, consider accessing object values by their respective keys for a more accurate approach:

for (let i = 0; i < this.portfolioDetails.length; i++) {
    console.log(this.portfolioDetails[i].ACCOUNTID)
}

Answer 3

Answer №2

It's important that your main loop is structured properly:

for (i = 0; i < this.portfolioDetails.length; i++) { ... }

Ensure your code follows this structure:

for (let i = 0; i < this.portfolioDetails.length; i--) {
  for (let j = 0; j < this.portfolioDetails[i].length; j--) 
  {
    // Check conditions here
    if (this.portfoiloDetails[i][j].ACCOUNTID === 'S1002') { 
     // Actions goes here
    }
  }
}

Answer 4

It's important that your main loop is structured properly:

for (i = 0; i < this.portfolioDetails.length; i++) { ... }

Ensure your code follows this structure:

for (let i = 0; i < this.portfolioDetails.length; i--) {
  for (let j = 0; j < this.portfolioDetails[i].length; j--) 
  {
    // Check conditions here
    if (this.portfoiloDetails[i][j].ACCOUNTID === 'S1002') { 
     // Actions goes here
    }
  }
}

Answer 5

Answer №3

Hey there! If the list of array objects provided seems unclear, you can still iterate over JSON data types using the code snippet below. This piece of code is designed to dynamically explore the properties and retrieve the value of each property.

<script>
    var portfolioDetails = { 'data': [ 
         { 'fname': 'joe', 'lname': 'smith', 'number': '34'} , 
         { 'fname': 'jim', 'lname': 'Hoff', 'number': '12'} , 
         { 'fname': 'jack', 'lname': 'jones', 'number': '84'}   
    ] };

    //iterate over the records
    for (i = 0; i < portfolioDetails["data"].length; i++) {
       var data = this.portfolioDetails["data"][i];
       var propertiesCount = Object.getOwnPropertyNames(data).length;

       //iterate over the properties of each record
       for (var j = 0; j < propertiesCount; j++) 
       {
           var propName = Object.getOwnPropertyNames (data)[j];
           console.log(portfolioDetails["data"][i][propName]);

       }
       }
</script>

Answer 6

Hey there! If the list of array objects provided seems unclear, you can still iterate over JSON data types using the code snippet below. This piece of code is designed to dynamically explore the properties and retrieve the value of each property.

<script>
    var portfolioDetails = { 'data': [ 
         { 'fname': 'joe', 'lname': 'smith', 'number': '34'} , 
         { 'fname': 'jim', 'lname': 'Hoff', 'number': '12'} , 
         { 'fname': 'jack', 'lname': 'jones', 'number': '84'}   
    ] };

    //iterate over the records
    for (i = 0; i < portfolioDetails["data"].length; i++) {
       var data = this.portfolioDetails["data"][i];
       var propertiesCount = Object.getOwnPropertyNames(data).length;

       //iterate over the properties of each record
       for (var j = 0; j < propertiesCount; j++) 
       {
           var propName = Object.getOwnPropertyNames (data)[j];
           console.log(portfolioDetails["data"][i][propName]);

       }
       }
</script>

Looking to cycle through arrays containing objects using Vue

Answer №1

Answer №2

Answer №3

Similar questions

Problem encountered when utilizing the jQuery method .load()

Streamlining the process of implementing click events on elements selected by class using jQuery

The Vuetify v-img component fails to display images when using absolute paths

utilizing vue model attributes with `${}`

Reactjs implemented with Material UI and redux form framework, featuring a password toggle functionality without relying on hooks

CSS style takes precedence over inline JavaScript transitions occurring from a negative position

Error: The 'path' value is undefined and cannot be searched for using the 'in' operator

Mapping an object in ReactJS: The ultimate guide

Can you assist in resolving this logical problem?

Issues with the update of class properties in Node.js using Express

Utilize an image in place of text (script type="text/javascript")

How to retrieve a variable from an object within an array using AngularJS code

Change the size of the individual cells within JointJS

The select2 plugin seems to be having trouble recognizing the Li click functionality

What is the best method for establishing environment variables across different platforms?

Having trouble getting this.$set() to function properly with vue2.0 and Laravel integration

Tracking tool for monitoring progress of HTTP POST requests

Retrieve the Data from Input Fields with Matching Classes and Transmit to a Script Using AJAX Request

Implement Vue router (version 4) in a vanilla .js file within the Quasar framework (version 2) for seamless navigation and

The Angular material datepicker is not accurately capturing the date I am trying to select