CODEWITHSUNDEEP
javascripthtmllocal-storage
SIMBIOSIS surl
SIMBIOSIS surl

Reputation: 397

Dinamically populating the select options but changing the textContent values (not Jquery please)

I have this selectand I'm dinamically populating its options from a localStorage string. But I'm running into an issue; when selecting more than once the options are repeated increasing each time.

The second thing is that I would need to change the textContent from a list and not to show the option values.

This is my javascript;

    function populatepymnt(key){
    var select = document.getElementById("pymntselect");

    var i=select.options.length-1;i>=1;i--;

    var all = JSON.parse(localStorage.getItem(key));

    var payments = all[0].payments;

    var taxes = [];

    for (var i in payments[0]){
        if ((i != "total") && (i != "di") && (i !="myp") && (!i.includes("br")) && (i!="lapse") && (i != "id") && (i != "ldate"))
        {
            taxes.push(i);
        }
    }
    for(var i = 0; i < taxes.length; i++){
    var el = document.createElement("option");
    el.textContent = taxes[i];
    el.value = taxes[i];
    select.appendChild(el);
    }
}

This is the localStorage string;

    [{"payments":
    [{"id":"1",
    "ldate":"10/01/2022 12:00 am",
    "lapse":"Unde at voluptate ma",
    "di":"71",
    "myp":"27",
    "pirtcp":"100",
    "pirtcpbr":"Adipisci quia magna ",
    "pcvs":"3756",
    "pcvsbr":"Voluptatum voluptate",
    "rent":"65",
    "rentbr":"Reprehenderit aliqu"},{"id":"2",
    "ldate":"02/01/2022 12:00 am",
    "lapse":"Mollit qui blanditii",
    "di":"10",
    "myp":"30",
    "pirtcp":"92",
    "pirtcpbr":"Explicabo Optio et",
    "pcvs":"63546",
    "pcvsbr":"Tempora ut perferend",
    "rent":"30",
    "rentbr":"Impedit molestiae e"
    }]
}]

And this is my html;

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script>
    var data = [{"payments":[{"id":"1","ldate":"10/01/2022 12:00 am","lapse":"Unde at voluptate ma","di":"71","myp":"27","pirtcp":"100","pirtcpbr":"Adipisci quia magna ","pcvs":"3756","pcvsbr":"Voluptatum voluptate","rent":"65","rentbr":"Reprehenderit aliqu"},{"id":"2","ldate":"02/01/2022 12:00 am","lapse":"Mollit qui blanditii","di":"10","myp":"30","pirtcp":"92","pirtcpbr":"Explicabo Optio et","pcvs":"63546","pcvsbr":"Tempora ut perferend","rent":"30","rentbr":"Impedit molestiae e",}]}]
    localStorage.setItem("f7Clients", JSON.stringify(data));
    </script>
</head>
<body>
    <table align="center" style="width: 430px;">
        <tr>
            <td align="right">Services:</td>
            <td>
                <select id="pymntselect" onclick="populatepymnt('f7Clients')" style="width: 200px;">
                    <option value="All">All</option>
                </select>
            </td>

            <td align="right">Services:</td>
            <td>
                <select style="width: 200px;">
                    <option selected value="All">All</option>
                    <option value="pirtcp">Car tax</option>
                    <option value="pcvs">House tax</option>
                    <option value="rent">Other taxes</option>
                </select>
            </td>
        </tr>
    </table>

    <script src="index.js"></script>
</body>
</html>

And this is the list of textContent equivalents I would like to use;

pirtcp = Car tax
pcvs = House tax
rent = Other tax

As you can see there are two selects. The second one is just to show how I would need to arrange the first select. Any idea on how to fix the issue and populate the options using the equivalents from the list?

Upvotes: 0

Views: 67

Answers (1)

aerial
aerial

Reputation: 1198

I would suggest that you first make an object with all taxes that will be populated in the select dropdown:

const taxes = {
  pirtcp: 'Car tax',
  pcvs: 'House tax',
  rent: 'Other taxes',
}

Then update populatepymnt() so it clears all the options except that default All, get keys from localStorage and populate the dropdown.

function populatepymnt(key) {
  select.innerHTML = '<option value="All">All</option>'
  const all = JSON.parse(localStorage.getItem(key))
  const payments = all[0].payments

  /* 
    Instead of looping through all of 'payments[0]' keys, loop through 
    the keys in 'taxes' and check if they exist in 'payments[0]'
  */
  for (const key in taxes) {
    if (payments[0][key]) {
      const el = document.createElement('option')
      el.value = key
      el.textContent = taxes[key]
      select.appendChild(el)
    }
  }
}

Here is a working example. Note that the snippets don't allow accessing localStorage that is why I am using the data object directly. 

const taxes = {
  pirtcp: 'Car tax',
  pcvs: 'House tax',
  rent: 'Other taxes',
}

const data = [{"payments":[{"id":"1","ldate":"10/01/2022 12:00 am","lapse":"Unde at voluptate ma","di":"71","myp":"27","pirtcp":"100","pirtcpbr":"Adipisci quia magna ","pcvs":"3756","pcvsbr":"Voluptatum voluptate","rent":"65","rentbr":"Reprehenderit aliqu"},{"id":"2","ldate":"02/01/2022 12:00 am","lapse":"Mollit qui blanditii","di":"10","myp":"30","pirtcp":"92","pirtcpbr":"Explicabo Optio et","pcvs":"63546","pcvsbr":"Tempora ut perferend","rent":"30","rentbr":"Impedit molestiae e",}]}]

const select = document.getElementById('pymntselect')

function populatepymnt() {
  select.innerHTML = '<option value="All">All</option>'
  const payments = data[0].payments
  for (const key in taxes) {
    if (payments[0][key]) {
      const el = document.createElement('option')
      el.value = key
      el.textContent = taxes[key]
      select.appendChild(el)
    }
  }

  /* Just for debugging */
  select.addEventListener('change', () => {
    console.clear()
    console.log('Value = ', select.value)
  })
  /* ------------------ */
}

populatepymnt()
<select id="pymntselect" style="width: 200px">
  <option value="All">All</option>
</select>

Upvotes: 1

Related Questions