0

I need help with my code here. I cannot figure out how I can disable the options I have if they have "N/A" value.

Here's a piece of my code. 

var priceByCategoryPL = {
    // Apple Price
    A: [{
        name: "iPhone 4",
        onee: "$89.00",
        twoo: "$99.00",
        thre: "N/A",
        four: "N/A",
        five: "N/A",
        sixx: "N/A"
    }]
}

function updateStorage()
{
    let drpOptionsStorage = "<option value='' disabled selected>Select Storage</option>";
    for (let key in storageByCategoryPL) {
            if (storageByCategoryPL.hasOwnProperty(key) && selectedValue == key) {
                let drpValues = storageByCategoryPL[key];
                if (drpValues.length > 0) {
                    for (let storageInfo in drpValues) {
                        if (Object.keys(drpValues[storageInfo]).length > 0) {
                                for (let option in drpValues[storageInfo]) {
                                    drpOptionsStorage += "<option value="+option+">" + drpValues[storageInfo][option] + "</option>";
                                }
                        }
                    }
                }
                break;
            }
    }

    if (drpOptionsStorage.length > 0) {
            storageDrp.innerHTML = drpOptionsStorage;
    }
}

So basically, what this does is it selects the brand, model, storage and then shows the price. But in this scenario, I just want to disable the storage if the price is not applicable. If anyone can help me clear it up, it would help me a lot with my proj. Thanks guys.

https://codepen.io/Foxseiz/pen/KKpmywz

Foxseiz
  • 290
  • 1
  • 6
  • 20

3 Answers3

1

I'm not sure if this is what you want, this prevents creating an <option> element when it encounters "N/A" value.

for (let option in drpValues[storageInfo]) {
  if (drpValues[storageInfo][option] !== "N/A") {
    drpOptionsStorage += "<option value="+option+">" + drpValues[storageInfo][option] + "</option>";
  }
}

Let me know if this is not it.

Anyway, using insertHTML on everything might be tempting because it's less typing but I'd recommend appendChild() instead. Mostly because it's a way cleaner and more maintainable approach, but also better for performance. Secondly if I was you I'd seriously rethink the way you're structuring your data, i.e here:

var priceByCategoryPL = {
  A: [{
    name: "iPhone 4",
    onee: "$89.00",
    twoo: "$99.00",
    thre: "N/A",
    four: "N/A",
    five: "N/A",
    sixx: "N/A"
}]
}

You're treating every price as property when in the "real world" price is a product's property. Here's example:

var priceByCategoryPL = {
  A: [{
    name: "iPhone 4",
    prices: ["$89.00", "$99.00", "N/A", "N/A", "N/A", "N/A"]
}]
}

But from what I've seen there are more things that I'd consider as design flaws that may kick back if your project grows, so actually reworking only that part makes little to no sense at all in my opinion.

Coldark
  • 445
  • 4
  • 16
1

You need to remove the storage option for the respective prices are "N/A".

Changes you need to make,

Inside updateStorage() function, inside for (let option in drpValues[storageInfo]){...}, you need to include a filter method like, and include the options inside this filter method..

    priceByCategoryPL.S.filter(x => {
      if(x[option] && x[option] != "N/A"){
         drpOptionsStorage += "<option value="+option+">" + drpValues[storageInfo][option] + "</option>";
       }
    });

Working Snippet as follows:

// Model Numbers
var brandByCategoryPL = {
    // Samsung
    S: [{
        name: "Galaxy A20"
    }]
}


var storageByCategoryPL = {
    S: [{
        onee: "16GB",
        twoo: "32GB",
        thre: "64GB",
        four: "128GB",
        five: "256GB",
        sixx: "512GB",
        sevn: "1TB"
    }]
}
   
var priceByCategoryPL = {
    // Samsung Price
    S: [{
        name: "Galaxy A20",
        onee: "N/A",
        twoo: "$279.00",
        thre: "N/A",
        four: "N/A",
        five: "N/A",
        sixx: "N/A"
    }]
}

var brandDrp = document.getElementById("cpodevicelist"),
   catDrp   = document.getElementById("cpocategorylist"),
    storageDrp  = document.getElementById("cpostoragelist"),
    priceText = document.getElementById("cpopricelist"),
    selectedValue = "";

function updateDrp(element, type)
{
    if (element.length > 0) {
      selectedValue = element.value;
        // console.log(selectedValue);
        if (type == 'brand') {
          /* Call for model. */
            updateModel();
            /* Call for storage. */
            updateStorage();
            /* Call for price. */
            updatePrice();
        } else if (type == 'cat') {
          /* Append price. */
            updatePrice();
        } else if (type == 'storage') {
          /* Append price. */
            updatePrice();
        }
    }
}

function updateModel()
{
  let drpOptionsModel = "<option value='' disabled selected>Select Model</option>";
   for (let key in brandByCategoryPL) {
      if (brandByCategoryPL.hasOwnProperty(key) && selectedValue == key) {
         let drpValues = brandByCategoryPL[key];
         if (drpValues.length > 0) {
            for (let option in drpValues) {
               drpOptionsModel += "<option value="+option+">" + drpValues[option]["name"] + "</option>";
            }
         }
        break;
      }
   }

   if (drpOptionsModel.length > 0) {
      catDrp.innerHTML = drpOptionsModel;
  }
}

function updateStorage()
{
   let drpOptionsStorage = "<option value='' disabled selected>Select Storage</option>";
   for (let key in storageByCategoryPL) {
      if (storageByCategoryPL.hasOwnProperty(key) && selectedValue == key) {
         let drpValues = storageByCategoryPL[key];
          // priceByCategoryPL.S.findIndex(x => {
          //   console.log(key)
          // });
         if (drpValues.length > 0) {
           for (let storageInfo in drpValues) {
              if (Object.keys(drpValues[storageInfo]).length > 0) {
                 for (let option in drpValues[storageInfo]) {
                       priceByCategoryPL.S.filter(x => {
                         if(x[option] && x[option] != "N/A"){
                           drpOptionsStorage += "<option value="+option+">" + drpValues[storageInfo][option] + "</option>";
                         }
                       });                    
                 }
              }
           }
         }
         break;
      }
   }

   if (drpOptionsStorage.length > 0) {
      storageDrp.innerHTML = drpOptionsStorage;
   }
}

function updatePrice()
{
    priceText.value = "";
  if (Object.keys(priceByCategoryPL[brandDrp.value]).length > 0) {
      for (let modelKey in priceByCategoryPL[brandDrp.value]) {
          if (catDrp.value == modelKey) {
            for (let storageKey in priceByCategoryPL[brandDrp.value][modelKey]) {
                if (storageDrp.value == storageKey) {
                      priceText.value = priceByCategoryPL[brandDrp.value][modelKey][storageKey];
                    }
              }
            }
        }
    }
}
<div class="content-label inputIconBg">
  <select class="content-input" name="cpodevicelist" id="cpodevicelist" style="width:350px;" onchange="updateDrp(this, 'brand');">
    <option value="" disabled selected>Select Brand</option>
    <option value="S">Samsung</option>
  </select>
</div>

<div class="content-label inputIconBg" id="msrpcat">
  <select class="content-input" name="cpocategorylist" id="cpocategorylist" style="width:350px;" onchange="updateDrp(this, 'cat');">
    <option value="" disabled selected>Select Model</option>
  </select>
</div>

<div class="content-label inputIconBg" id="msrpstorage">
  <select class="content-input" name="storage" id="cpostoragelist" style="width:350px;" onchange="updateDrp(this.value, 'storage');">
    <option value="" disabled selected>Select Storage</option>
  </select>
</div>

<div class="content-label inputIconBg" id="msrpprice">
  <input class="content-input" type="text" id="cpopricelist" placeholder="CPO Price" style="width:350px;" readonly />
  <i class="fas fa-dollar-sign" id="msrpdollar" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>

Working codepen here...

Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116
  • I think this is what I need, remove then instead of disabling. Thanks Maniraj, let me try to add it in my whole project and see. – Foxseiz Feb 28 '20 at 05:19
  • @Foxseiz Yes removing is better than disabling which will only provide the results which you can select.. Feel free to accept the solution if it solves your issue.. – Maniraj Murugan Feb 28 '20 at 05:24
  • Somehow when I add the code to the actual project, it's duplicating the storages. hmm. idk what I'm doing wrong. – Foxseiz Feb 28 '20 at 05:27
  • If you check my codepen again, I added the full list of devices but its duplicating the storages. – Foxseiz Feb 28 '20 at 05:29
  • @Foxseiz, I don't see any changes in your codepen.. Please provide codepen with appropriate data that you real application has.. Make sure you have updated your codepen else provide new codepen link with relevant data.. – Maniraj Murugan Feb 28 '20 at 05:30
  • Sorry, try again please. – Foxseiz Feb 28 '20 at 05:31
  • @Foxseiz, It is too complicated as per the existing structure.. Is it okay if I modify your existing structure of code?? – Maniraj Murugan Feb 28 '20 at 08:06
  • Yes go ahead please. – Foxseiz Feb 28 '20 at 08:07
  • @Foxseiz, Here you go https://codepen.io/Maniraj_Murugan/pen/VwLbQjz .. Please check for all the cases.. Only if you choose particular model, then the storage will be listed down for that model which doesn't have price value as ```N/A``` please check for all the cases.. – Maniraj Murugan Feb 28 '20 at 09:21
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208723/discussion-between-foxseiz-and-maniraj-murugan). – Foxseiz Feb 28 '20 at 16:40
0

I believe it's as simple as adding an else:

if (drpOptionsStorage.length > 0) {
  storageDrp.innerHTML = drpOptionsStorage;
}
else {
  storageDrp.disabled = true;
}

Add the disabled attribute to the <select> element if there are no options.

Given that you have 1 default option, though, and it's stored as a string, I don't think .length is acting the way you expect. It's counting characters in the string, not options in an array. So you should probably change the options to an array of strings and join('') them immediately before adding them to the select.

Sydney Y
  • 2,912
  • 3
  • 9
  • 15