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

Tips for effectively utilizing Formik's handleChange method multiple times to update a single value

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

Is your custom login form in Web2py not submitting properly?

The error message for ExpressJS states: "Headers cannot be set after they have already been sent."

Menu options are unresponsive to clicks in the dropdown

Tips for creating animations using parent and child components in Angular

Is there any distinction in utilizing this to retrieve the watcher's value compared to using the argument provided?

Invoking functions with JavaScript objects

Steps to retrieve hexadecimal addresses sequentially

Conceal two DIV elements if one of them is empty

Invoking a shared controller function in AngularJS from a separate controller

Customize YouTube iframe styles in Angular 4+ with TypeScript

What is a sleek method for including a key and value pair to an object using an array?

The Vue component's TypeScript object prop type does not match the expected value

What is the best way to make sure the background color of a container stretches across the full width of the screen?

Retrieving the checked value of a checkbox in Angular instead of a boolean value

Deciding whether to implement Vuex in NUXT: A series of queries

Executing multiple setTimeout calls simultaneously can result in greater delays than anticipated

What is the method for transmitting a YAML file in the form of a base64 encoded string?

Unusual Type Inference in Typescript {} when Evaluating Null or Undefined