Show a confirmation message to the user if the data contains a true value

Question

Show a confirmation message to the user if the data contains a true value

I am looking to implement a confirm message using Vue.js that will only display if the data retrieved from an API contains a true value. The API output is shown below, and I have included the if condition used to trigger the alert message.

//API Data

{
    "BNG-JAY-137-003": false,
    "BNG-JAY-137-004": false, 
    "BNG-JAY-137-005": false 
}

//Below is the if condition where the API output is stored in a variable 'selected_data'

if(this.selected_data){
    if(confirm("Do you want to Turn On All lights")){
        alert("Lights on")
    }
}

javascript vue.js

Answer 1

Answer №1

To determine if any property within your object contains the value true, you will need to iterate through the object. You can use the following code snippet as an example:

let data = {
  "BNG-JAY-137-003": false,
  "BNG-JAY-137-004": true,
  "BNG-JAY-137-005": false
};

let hasTrue = false;

for(let key in data) {
  if(data[key]) {
    hasTrue = true;
    break;
  }
}

if(hasTrue) {
   if(confirm("Do you want to Turn On All lights")){
     alert("Lights on");
   }
}

Answer 2

To determine if any property within your object contains the value true, you will need to iterate through the object. You can use the following code snippet as an example:

let data = {
  "BNG-JAY-137-003": false,
  "BNG-JAY-137-004": true,
  "BNG-JAY-137-005": false
};

let hasTrue = false;

for(let key in data) {
  if(data[key]) {
    hasTrue = true;
    break;
  }
}

if(hasTrue) {
   if(confirm("Do you want to Turn On All lights")){
     alert("Lights on");
   }
}

Answer 3

Answer №2

Check this out.

if (Object.keys(selected_data).map(function(item) { 
    return selected_data[item]}).indexOf(true) >=0) {
       if(confirm("Would you like to Activate All lights?")) {
           alert("Lights activated")
       }
    }
}

Answer 4

Check this out.

if (Object.keys(selected_data).map(function(item) { 
    return selected_data[item]}).indexOf(true) >=0) {
       if(confirm("Would you like to Activate All lights?")) {
           alert("Lights activated")
       }
    }
}

Answer 5

Answer №3

Consider using the confirm method in JavaScript. This method will always return a boolean value which can be used in your code logic. You can also combine it with Object.values().

function checkAndConfirm(object) {
    let result = true;
    for (let key in Object.values(object))
        result = Object.values(object)[key] && result;

    if (result) {
        let confirmed = confirm("Do you want to turn on all lights?");
        if (confirmed) alert("Lights on")
    }
}

checkAndConfirm({ //this should evaluate as false
    "BNG-JAY-137-003": false,
    "BNG-JAY-137-004": true, 
    "BNG-JAY-137-005": true
});
checkAndConfirm({ //this should evaluate as true
    "BNG-JAY-137-003": true,
    "BNG-JAY-137-004": true, 
    "BNG-JAY-137-005": true
});

Answer 6

Consider using the confirm method in JavaScript. This method will always return a boolean value which can be used in your code logic. You can also combine it with Object.values().

function checkAndConfirm(object) {
    let result = true;
    for (let key in Object.values(object))
        result = Object.values(object)[key] && result;

    if (result) {
        let confirmed = confirm("Do you want to turn on all lights?");
        if (confirmed) alert("Lights on")
    }
}

checkAndConfirm({ //this should evaluate as false
    "BNG-JAY-137-003": false,
    "BNG-JAY-137-004": true, 
    "BNG-JAY-137-005": true
});
checkAndConfirm({ //this should evaluate as true
    "BNG-JAY-137-003": true,
    "BNG-JAY-137-004": true, 
    "BNG-JAY-137-005": true
});

Show a confirmation message to the user if the data contains a true value

Answer №1

Answer №2

Answer №3

Similar questions

What would be the best TypeScript target and libs to utilize in a transpiler-free Node.js project?

Trigger oncopy on the body excluding specific class

What could be causing the 404 errors on my static nuxt.js application hosted on GitHub pages?

Ways to update the color of text exceeding the block boundaries: JavaScript and CSS

Partially accessible Angular service within a callback function

Ways to implement the function provided in the website using javascript

Tips for handling the closure of a Bootstrap popup upon submission in a VUE framework

Advancing through time with progress

Utilizing AngularJS and Node.js to update MongoDB

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

Tips for creating a personalized callback within a user function using JavaScript

Eliminating duplicate data submissions with jQuery Ajax

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

Master the art of using useMutation from react-query: Learn how to handle error messages and success notifications effectively!

What are the methods to alter validation for a Formfield based on the input from other Formfields?

Bring in Bootstrap and the Carousel plugin using Webpack Encore

The animation does not reoccur in Firefox when using Modal

Tips for eliminating confidential content from adjacent/preceding entries in WordPress?

Error in rendering Vue JS on Internet Explorer and Microsoft Edge

dimming of dojo dijit.Dialog