What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

Question

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

https://i.stack.imgur.com/PpFlB.pngI currently have multiple Arrays containing various inputs

this.listNumber = [
  {
    "GenericQuestions": [
      {
          "input": "long",
      },
      {
          "input": "dog",
      },
      {
          "input": "",
      }
    ],
  },
  {
    "GenericQuestions": [
      {
          "input": "fred",
      },
      {
          "input": "barney",
      },
      {
          "input": "betty",
      }
    ]
  }
]

// There can be more Arrays

In the past, I used the getFilter Method to retrieve input results from a single Array

getFilter(index: string | number) {  // index being 0
    return this.listNumber[index].GenericQuestions.filter((c: { input: any }) => !!c.input).length;
} // returns 2

Now, I am trying to find a way to get the results of all filled out inputs from both Arrays.

I attempted

  const flatfile = this.listNumber.flat();
  console.log("flatfile", flatfile);

However, it seems to have failed because GenericQuestions are contained within separate objects.

javascript angularjs typescript

Answer 1

Answer №1

Assuming you have an array called listNumbers structured like this:

this.listNumbers = [
    {
        "GenericQuestions": [
            {
                "input": "some text 1"
            },
            {
                "input": "some text 2"
            },  
            {
                "input": "some text 3"
            } 
        ]
    },
    {
        "GenericQuestions": [
            {
                "input": "some text 4"
            },
            {
                "input": "some text 5"
            },  
            {
                "input": "some text 6"
            }
        ]
    }
]

To extract the input fields from all arrays identified by "GenericQuestions", create a new array and populate it with the elements of every "GenericQuestions" array

const newArray = []

for (let object of this.listNumbers) {
    newArray.push(...object["GenericQuestions"])
}

This process will result in a single flat array that includes all input objects

newArray = [
    {
        "input": "some text 1"
    },
    {
        "input": "some text 2"
    },
    {
        "input": "some text 3"
    },
    {
        "input": "some text 4"
    },
    {
        "input": "some text 5"
    },
    {
        "input": "some text 6"
    }
]

Answer 2

Assuming you have an array called listNumbers structured like this:

this.listNumbers = [
    {
        "GenericQuestions": [
            {
                "input": "some text 1"
            },
            {
                "input": "some text 2"
            },  
            {
                "input": "some text 3"
            } 
        ]
    },
    {
        "GenericQuestions": [
            {
                "input": "some text 4"
            },
            {
                "input": "some text 5"
            },  
            {
                "input": "some text 6"
            }
        ]
    }
]

To extract the input fields from all arrays identified by "GenericQuestions", create a new array and populate it with the elements of every "GenericQuestions" array

const newArray = []

for (let object of this.listNumbers) {
    newArray.push(...object["GenericQuestions"])
}

This process will result in a single flat array that includes all input objects

newArray = [
    {
        "input": "some text 1"
    },
    {
        "input": "some text 2"
    },
    {
        "input": "some text 3"
    },
    {
        "input": "some text 4"
    },
    {
        "input": "some text 5"
    },
    {
        "input": "some text 6"
    }
]

Answer 3

Answer №2

Upon understanding your request correctly, the following code provides a solution:

let listItems = [{
    GenericItem: [{ value: "apple" }, { value: "banana"}, { value: ""}]
}, 
{
    GenericItem: [ {value: "orange"}, { value: "mango"}, { value: "kiwi" } ]
}];

let outputResult = listItems.map(item => item.GenericItem).flat().filter(entry=>!!entry.value);

console.log(outputResult);

Here is the expected output:

[
  { value: 'apple' },
  { value: 'banana' },
  { value: 'orange' },
  { value: 'mango' },
  { value: 'kiwi' }
]

Answer 4

Upon understanding your request correctly, the following code provides a solution:

let listItems = [{
    GenericItem: [{ value: "apple" }, { value: "banana"}, { value: ""}]
}, 
{
    GenericItem: [ {value: "orange"}, { value: "mango"}, { value: "kiwi" } ]
}];

let outputResult = listItems.map(item => item.GenericItem).flat().filter(entry=>!!entry.value);

console.log(outputResult);

Here is the expected output:

[
  { value: 'apple' },
  { value: 'banana' },
  { value: 'orange' },
  { value: 'mango' },
  { value: 'kiwi' }
]

Answer 5

Answer №3

Essentially, the task at hand involves adding up the number of non-empty input elements in your listNumber array. Sound familiar?

All you have to do is... well... sum things up like this:

let total_cnt = 0
for( let i = 0 ; i !== this.listNumber.length ; ++i ) total_cnt += this.getFilter(i)
console.log(total_cnt)

Alternatively, if you prefer a more functional approach:

const total_cnt = this.listNumber.reduce((total_cnt, _, i) => total_cnt + this.getFilter(i), 0)

No need to bother creating temporary arrays or rehashing existing getFilter code. Keep it DRY!

Answer 6

Essentially, the task at hand involves adding up the number of non-empty input elements in your listNumber array. Sound familiar?

All you have to do is... well... sum things up like this:

let total_cnt = 0
for( let i = 0 ; i !== this.listNumber.length ; ++i ) total_cnt += this.getFilter(i)
console.log(total_cnt)

Alternatively, if you prefer a more functional approach:

const total_cnt = this.listNumber.reduce((total_cnt, _, i) => total_cnt + this.getFilter(i), 0)

No need to bother creating temporary arrays or rehashing existing getFilter code. Keep it DRY!

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

Answer №1

Answer №2

Answer №3

Similar questions

methods for transferring JSON data from JavaScript to PHP

Developing versatile form elements with Formik and the Yup library for React and Vite

Tips for removing a row from a DataGrid column with the click of a button

Enhancing AngularJS: Revamping the isolated scope within a directive

CSS - Discovering the reason behind the movement of text post generation (animation)

What is a practice for utilizing navCtrl.push() with a variable storing a class name?

Ways to address the issue of duplicated names in input fields

How to handle redirection in React when encountering a 404 error with React

Is it possible to link the _id of a mongodb array to its corresponding clientId in another array?

Failure to display div upon onmouseover event

Issues arise in Angular 4 when the "Subscribe" function is repeatedly invoked within a for/switch loop

The environmental variables stored in the .env file are showing up as undefined in Next.js 13

Encountering a TypeScript error while trying to pass the myDecorator function as a decorate prop to React

Calculating the volume of an STL file mesh using three.js

My table elements are automatically being populated with <tr> elements thanks to Javascript

Create a dynamic form using JSON data and the Material UI library

What is the best way to retrieve the IDs of selected items in jQuery selectables?

Having received a status code of 200 in Flask WebApp, I am still unable to access the page

What are the connections between objects in ReactJS?

Guide to encoding an array of objects into a URI-friendly query string using TypeScript