Ensure the presence of a value in an array using Angular

Question

Ensure the presence of a value in an array using Angular

I need to check if any of the "cuesData" have values or lengths greater than 0. However, in my current code, I can only evaluate the first array and not the rest.

https://i.sstatic.net/bMpvg.jpg

TS

checkValues(values) {
    const result = Object.values(values).every((value) => value[1].cuesData.length > 0);
    return result;
}

HTML

<div *ngIf="checkValues(values) === true">

JSON

  [
      [
        "videoData__1",
        {
          "id": 1,
          "title": "Pale Blue Dot",
          "stoppedAt": 97.834667,
          "cuesData": [
            {
              "startTime": 25.335678,
              "endTime": 35.335678,
              "description": "fqff"
            }
          ]
        }
      ],
      [
        "videoData__2",
        {
          "id": 2,
          "title": "Big Buck Bunny",
          "stoppedAt": 247.57881,
          "cuesData": []
        }
      ],
      [
        "videoData__3",
        {
          "id": 3,
          "title": "Elephants Dream",
          "stoppedAt": 404.585327,
          "cuesData": []
        }
      ]
]

javascript arrays angular typescript ecmascript-2016

Answer 1

Answer №1

Modification,

checkValues(values){
  const result = Object.values(values).some((value) => value[1].cuesData.length > 0);
  return result;
}

To

checkValues(values){
  const result = Object.values(values).every((value) => value[1].cuesData.length > 0);
  return result;
}

Functional Stackblitz: https://stackblitz.com/edit/my-angular-starter-j4yypu

In this scenario, the .every() method ensures all conditions are met, while the some() method requires at least one condition to be true.

Stackblitz without cuesdata length: https://stackblitz.com/edit/my-angular-starter-cfpxa5

Answer 2

Modification,

checkValues(values){
  const result = Object.values(values).some((value) => value[1].cuesData.length > 0);
  return result;
}

To

checkValues(values){
  const result = Object.values(values).every((value) => value[1].cuesData.length > 0);
  return result;
}

Functional Stackblitz: https://stackblitz.com/edit/my-angular-starter-j4yypu

In this scenario, the .every() method ensures all conditions are met, while the some() method requires at least one condition to be true.

Stackblitz without cuesdata length: https://stackblitz.com/edit/my-angular-starter-cfpxa5

Answer 3

Answer №2

If you want to achieve this, consider the following approach:

*ngIf="CheckValues(values)"

Here is the function implementation:

CheckValues(values : any[]){
   return values.some(v=>v[1].cuesData&&v[1].cuesData.length); //return true if any array contains cuesData
}

To learn more about the some method, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Answer 4

If you want to achieve this, consider the following approach:

*ngIf="CheckValues(values)"

Here is the function implementation:

CheckValues(values : any[]){
   return values.some(v=>v[1].cuesData&&v[1].cuesData.length); //return true if any array contains cuesData
}

To learn more about the some method, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Ensure the presence of a value in an array using Angular

Answer №1

Answer №2

Similar questions

Transmit updated value to masterpage upon selection alteration

Issue with generating WebGL shaders

Angular 6 introduces a new component with cascading comboboxes for easier data organization

Transferring data using a JavaScript enhanced form

I'm wondering if there exists a method to arrange a multi-array in javascript, say with column 1 arranged in ascending order and column 2 arranged in descending order?

Is there a way to replicate Twitter's "what's happening" box on our website?

Adding a value to an element in JavaScript to interact with it using Selenium

What strategies can be implemented to improve the load time for bigvideo.js?

Tips for Configuring a Nestjs Query Using TypeORM to Retrieve Several Entries

Error encountered when trying to send form data through an AJAX request

Unlock the potential of your Windows system by running multiple Node versions at the

Fade in and out MaterialUI text using useEffect in combination with setInterval

How can we implement :focus-within styling on Material-UI Select when the input is clicked?

Leveraging both function arguments and the 'this' keyword within a single

Having trouble writing Jest test cases for a function that returns an Observable Axios response in Nest JS

Incorporation of a dynamic jQuery animation

Module for importing text without verifying types using wildcards

Tips for implementing a CSS loader exclusively on a particular section of your content

What is the best way to add hidden columns in Telerik Grid MVC3?

Turn off the ability to click on images, but allow users to access the right