Dynamically update JavaScript array

Question

I have a JS array like this.

const PaymentMethods = [
    {
      type: "DEBIT",
      cardType: "VISA",
    },
    {
      type: "CREDIT",
      cardType: "VISA",
    }
  ];

As you can see, I am hardcoding these right now. But I want to dynamically update this PaymentMethods

For e.g. There will be 2 checkbox. isCredit and isDebit

If isCredit = true and isDebit = false, I want the PaymentMethods to look like this

const PaymentMethods = [
    {
      type: "CREDIT",
      cardType: "VISA",
    }
  ];

If isCredit = false and isDebit = true, our PaymentMethods should be

const PaymentMethods = [
    {
      type: "DEBIT",
      cardType: "VISA",
    },
  ];

If isCredit = false and isDebit = false, our PaymentMethods should be

const PaymentMethods = [];

If isCredit = true and isDebit = true, our PaymentMethods should be like original one at top.

Can someone please highlight me how I can do this. I have searched quite a few but didn't find anything in this regard yet.

PaymentMethods.push({ type: "CREDIT", cardType: "VISA", }) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Junius L
– Junius L, Commented Nov 7, 2019 at 17:15
First issue, you're defining your array as a const rather than a let. Constants are not intended to change — Qiniso
– Qiniso, Commented Nov 7, 2019 at 17:15
@Qiniso depends on how you are going to use the array, using the Array methods doesn't require you to define the array as let — Junius L
– Junius L, Commented Nov 7, 2019 at 17:18

T.J. Crowder · Accepted Answer · 2019-11-07 17:17:20Z

A couple of options for you:

You can have a master array with the two entries, and use filter to create a filtered version for a particular value of the isCredit and isDebit flags:

let paymentMethods = AllPaymentMethods.filter(({type}) => type === "CREDIT" && isCredit || type === "DEBIT" && isDebit);

Live Example:

const AllPaymentMethods = [
    {
        type: "DEBIT",
        cardType: "VISA",
    },
    {
        type: "CREDIT",
        cardType: "VISA",
    }
];
const isCredit = Math.random() < 0.5;
const isDebit = Math.random() < 0.5;
let paymentMethods = AllPaymentMethods.filter(({type}) => type === "CREDIT" && isCredit || type === "DEBIT" && isDebit);
console.log(`isCredit: ${isCredit}, isDebit: ${isDebit}, paymentMethods = ${JSON.stringify(paymentMethods)}`);

Run repeatedly to see different values of <code>isCredit</code> and <code>isDebit</code>.

Or you can have the separate entries and build the array with a pair of if statements:

const isDebit = Math.random() < 0.5;
const isCredit = Math.random() < 0.5;
let paymentMethods = [];
if (isCredit) {
    paymentMethods.push(creditOption);
}
if (isDebit) {
    paymentMethods.push(debitOption);
}

Live Example:

const debitOption =
{
    type: "DEBIT",
    cardType: "VISA",
};
const creditOption =
{
    type: "CREDIT",
    cardType: "VISA",
};

const isDebit = Math.random() < 0.5;
const isCredit = Math.random() < 0.5;
let paymentMethods = [];
if (isCredit) {
    paymentMethods.push(creditOption);
}
if (isDebit) {
    paymentMethods.push(debitOption);
}

console.log(`isCredit: ${isCredit}, isDebit: ${isDebit}, paymentMethods = ${JSON.stringify(paymentMethods)}`);

Run repeatedly to see different values of <code>isCredit</code> and <code>isDebit</code>.

norbitrial · Accepted Answer · 2019-11-07 17:24:10Z

I think you can use filter for this purpose on Array. Just like below:

const getPaymentMethods = (isCredit, isDebit) => {
  const paymentOptions = [
    {
      type: "DEBIT",
      cardType: "VISA",
    },
    {
      type: "CREDIT",
      cardType: "VISA",
    }
  ];
  
  if (isCredit && isDebit) {
    return paymentOptions;
  } else if (isCredit) {
    return paymentOptions.filter(e => {return e.type === 'CREDIT'});
  } else if (isDebit) {
    return paymentOptions.filter(e => {return e.type === 'DEBIT'});
  }
  
  return [];
}

// test cases:
console.log(getPaymentMethods(true, true));
console.log(getPaymentMethods(false, false));
console.log(getPaymentMethods(true, false));
console.log(getPaymentMethods(false, true));


// usage:
// const PaymentMethods = getPaymentMethods(true, false);

Read further about filter here in the documentation.

e03050 · Accepted Answer · 2019-11-07 17:37:19Z

Please consider this as a guid. not a fully functional code

  const PaymentMethods = [];
  let debitChecked = false; // varibles to keep checked status
  let creditChecked = false;

  onDebitCheckboxChanged() { // on check state change function
    this.debitChecked =   //TO DO get checkbox status
    this.updatePaymentMethods();
  }

  onCreditCheckboxChanged() { // on check state change function
    this.creditChecked =  //TO DO get checkbox status
    this.updatePaymentMethods();
  }

  updatePaymentMethods() { //update array acordingly
    this.PaymentMethods = [];
    if (debitChecked === true) {
      this.PaymentMethods.push({
        type: "DEBIT",
        cardType: "VISA",
      })
    }

    if (creditChecked === true) {
      this.PaymentMethods.push({
        type: "CREDIT",
        cardType: "VISA",
      })
    }

  }

Abdelrahman Haridy · Accepted Answer · 2019-11-07 17:55:01Z

1

This vanilla Javascript solution.

Firstly for HTML code

<h2>Choose payments</h2>
<input type="checkbox" name="payment" value="CREDIT" checked> CREDIT<br>
<input type="checkbox" name="payment" value="DEBIT"> DEBIT<br>
<hr>
<button onclick="checkout()">checkout</button>

Secondly for Javascript code

var checkbox =  document.getElementsByTagName('input');

function checkout() {
  const AllPaymentMethods = [];
  for (var i = 0; i < checkbox.length; i++) {
    if (checkbox[i].checked) {
      AllPaymentMethods.push({
        type: checkbox[i].value,
        cardType: "VISA"
      });
    }
  }

  console.log(AllPaymentMethods);
}

Also if you need to check it https://codepen.io/abhar/pen/ZEEomYj

answered Nov 7, 2019 at 17:55

Abdelrahman Haridy

213 bronze badges

Collectives™ on Stack Overflow

Dynamically update JavaScript array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related