Is it possible to verify if each value satisfies a condition within a Javascript function?

Question

Is it possible to verify if each value satisfies a condition within a Javascript function?

I am currently working on a project using Vue.js and Laravel where I have a data list named "questions." My goal is to iterate through this list and check if the answer value for each question is not null. If any question has a null answer, I want to prevent the form from submitting and notify the user to fill in all questions with an alert message.

However, I am facing an issue where even though some answers are still empty, the console logs 'success' when the function executes.

If anyone can help me identify where I went wrong with my approach, I would greatly appreciate it.

Here is the data list I am working with:

https://i.stack.imgur.com/1r7TH.png

As shown in the image, there are some null values in the answer fields that need to be filled out.

Below is the submit function that is linked to the form's submit button:

methods: {
        submitPressed(e){
            console.log(this.questions);
            this.questions.forEach(question => {
                question.questions.every(q => {
                    if(q.answer !== null){
                        console.log('success');
                        // this.submit();
                    } else {
                        e.preventDefault();
                        console.log('more to fill out');
                    }
                })
            })}
                
        
    },

Thank you in advance!

javascript laravel forms vue.js loops

Answer 1

Answer №1

It is important to ensure that a truthy value is returned within the every function.

methods: {
    submitPressed(e){
        this.questions.forEach(question => {
            const check = question.questions.every(q => {
                if (q.answer !== null) {
                    return true;
                } else {
                    return false;
                }
            });

            if (check) {
                // All answers have been provided
            } else {
                // Some answers are still missing
            }
        })
    }
}

Answer 2

It is important to ensure that a truthy value is returned within the every function.

methods: {
    submitPressed(e){
        this.questions.forEach(question => {
            const check = question.questions.every(q => {
                if (q.answer !== null) {
                    return true;
                } else {
                    return false;
                }
            });

            if (check) {
                // All answers have been provided
            } else {
                // Some answers are still missing
            }
        })
    }
}

Answer 3

Answer №2

There are multiple approaches to achieve this task. One method involves utilizing the some() function on the array.

methods: {
   submitPressed(e) {
      console.log(this.questions);
      if (this.questions.some(q => !q.answer)) {
         e.preventDefault();
         console.log('more information required');
      } else {
         console.log('successful submission');
         // this.submit();
      }
   }
},

For further information on some(), visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Answer 4

There are multiple approaches to achieve this task. One method involves utilizing the some() function on the array.

methods: {
   submitPressed(e) {
      console.log(this.questions);
      if (this.questions.some(q => !q.answer)) {
         e.preventDefault();
         console.log('more information required');
      } else {
         console.log('successful submission');
         // this.submit();
      }
   }
},

For further information on some(), visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Is it possible to verify if each value satisfies a condition within a Javascript function?

Answer №1

Answer №2

Similar questions

Is there a more efficient alternative to the sluggish scroll event?

Retrieving all buttons from a webpage and removing those with a specific background-image using JavaScript

Retrieving Twitter posts using the screen_name parameter in a Node.js environment

The Next.js application encounters a crash when trying to integrate Google Firebase authentication

Unable to add key/value pair to object in Node

Pass the returned variable value from a request.get call to another function in NodeJS Express

CustomTooltips in ChartJS allowing for an enhanced visual presentation of data

"Preventing premature access: how to handle the 'must not be accessed before initialization' error in Laravel Livewire

Error-free ngClick doesn't trigger AngularJS controller method

Having trouble with setting up the next image configuration for graphcms' images

using brackets to access objects in Vue.js

Verify if the array entries match

Utilize the "incorporate" feature to include any string within an array

Unveiling the mysteries of JSONP in conjunction with AJAX

Adjust the anchor tag content when a div is clicked

Switching back and forth between celsius and fahrenheit using jQuery (my mistake in the code)

Organizing Parsed JSON Data with JavaScript: Using the _.each function for Sorting

When removing an item using its key, the vue component does not automatically refresh

Guide to locating and substituting two integer values within a string using JavaScript

Protractor - I am looking to optimize my IF ELSE statement for better dryness, if it is feasible